• 【web前端】CSS盒子模型

    居然隔了一个星期了，啊我到底在干嘛。

    使用课程是黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

    目录

    框架

     一、盒子模型

    1、盒子模型组成

    2、边框

     3、表格的细线边框

    4、边框会影响盒子的实际大小 

    5、内边距

    6、案例-新浪导航栏

    7、案例-小米侧边栏

    8、外边距

    9、外边距典型应用

    10、外边距合并

    11、清除内外边距

    二、PS基本操作

    综合案例

     ​编辑

     疑问解答

     三、圆角边框

    1、语法和原理

     2、常用写法

     四、盒子阴影

     五、文字阴影

    框架

     一、盒子模型

    1、盒子模型组成

     

    2、边框

    border-style：solid-实线边框，dashed-虚线边框，dotted-点线边框

     

     3、表格的细线边框

    4、边框会影响盒子的实际大小 

    5、内边距

     

     

     当我们给盒子指定padding值之后，发生了2件事情:

    1.内容和边框有了距离，添加了内边距。
    2.padding影响了盒子实际大小。

     也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

    6、案例-新浪导航栏

    （高设置，宽用左右padding值挤开）

     代码如下：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>新浪导航栏</title>
    9.     <style>
    10.         .box {
    11.             height: 41px;
    12.             border-top: #ff8500 3px solid;
    13.             background-color: #fcfcfc;
    14.             border-bottom: #edeef0 1px solid;
    15.             line-height: 41px;
    16.         }
    17.  
    18.         .box a {
    19.             height: 41px;
    20.             text-decoration: none;
    21.             display: inline-block;
    22.             color: black;
    23.             padding: 0px 20px;
    24.             font-size: 12px;
    25.         }
    26.  
    27.         .box a:hover {
    28.             color: orange;
    29.             background-color: gainsboro;
    30.         }
    31.     </style>
    32. </head>
    33.  
    34. <body>
    35.     <div class="box">
    36.         <a href="#">新浪导航</a>
    37.         <a href="#">手机新浪网</a>
    38.         <a href="#">移动客户端</a>
    39.         <a href="#">微博</a>
    40.         <a href="#">三个字</a>
    41.     </div>
    42. </body>
    43.  
    44. </html>

    7、案例-小米侧边栏

     代码如下：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>小米侧边栏修改</title>
    9.     <style>
    10.         a {
    11.             background-color: #55585a;
    12.             display: block;
    13.             height: 40px;
    14.             width: 220px;
    15.             line-height: 40px;
    16.             padding-left: 30px;
    17.             text-decoration: none;
    18.             color: white;
    19.             font-size: 14px;
    20.         }
    21.  
    22.         a:hover {
    23.             background-color: #ff6700;
    24.         }
    25.     </style>
    26. </head>
    27.  
    28. <body>
    29.     <a href="#">手机 电话卡</a>
    30.     <a href="#">电视 盒子</a>
    31.     <a href="#">笔记本 平板</a>
    32.     <a href="#">出行 穿戴</a>
    33.     <a href="#">智能 路由器</a>
    34.     <a href="#">健康 儿童</a>
    35.     <a href="#">耳机 音响</a>
    36. </body>
    37.  
    38. </html>

    8、外边距

    9、外边距典型应用

    外边距可以让块级盒子水平居中，但是必须茜足两个条件:

    ①盒子必须指定了宽度(width )。
    ②盒子左右的外边距都设置为auto 。

    . header{ width: 960px; margin: 0 auto; }

    常见的写法，以下三种都可以:
    margin-left auto;

    margin-right auto;margin: auto;
    margin: 0 auto;

    注意:

    以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

    10、外边距合并

    （1）相邻块元素垂直外边距的合并

     (2)嵌套块元素垂直外边距的塌陷

    11、清除内外边距

    网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

    1. * {
    2.         padding:0;/*清除内边距*/
    3.  
    4.         margin : 0;/*清除外边距*/
    5.  
    6. }

    注意:行内元素为了照预兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

    二、PS基本操作

    因为网页美工大部分效果图都是利用PS ( Photoshop )来做的，所以以后我们大部分切图工作都是在PS里面完成。

    • 文件→打开:可以打开我们要测量的图片
    • Ctrl+R:可以打开标尺，或者视图→标尺
    • 右击标尺，把里面的单位改为像素
    • Ctrl+加号(+)可以放大视图，Ctrl+减号(-)可以缩小视图
    • 按住空格键，鼠标可以变成小手，拖动PS视图
    • 用选区拖动可以测量大小
    • Ctrl+ D可以取消选区，或者在旁边空白处点击一下也可以取消选区

     

    综合案例

     

     代码如下：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>综合案例-小米商城</title>
    9.     <style>
    10.         body {
    11.             background-color: #f5f5f5;
    12.         }
    13.  
    14.         * {
    15.             margin: 0;
    16.             padding: 0;
    17.         }
    18.  
    19.         .box {
    20.             width: 298px;
    21.             height: 405px;
    22.             background-color: #ffffff;
    23.             margin: 100px auto;
    24.         }
    25.  
    26.         .box img {
    27.             width: 100%;
    28.         }
    29.  
    30.         .review {
    31.             font-size: 14px;
    32.             padding: 0px 20px;
    33.             margin-top: 25px;
    34.         }
    35.  
    36.         .appraise {
    37.             margin-top: 50px;
    38.             color: #bcc0ca;
    39.             font-size: 10px;
    40.             padding-left: 22px;
    41.         }
    42.  
    43.         .info {
    44.             margin-top: 10px;
    45.         }
    46.  
    47.         .info a {
    48.             font-size: 14px;
    49.             padding-left: 22px;
    50.             text-decoration: none;
    51.             color: #3a3a3a;
    52.         }
    53.  
    54.         .xian {
    55.             color: #bcc0ca;
    56.             padding: 0px 5px;
    57.         }
    58.  
    59.         .price {
    60.             color: #ff7214;
    61.         }
    62.     </style>
    63. </head>
    64.  
    65. <body>
    66.     <div class="box">
    67.         <img src="images/img.jpg" />
    68.         <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
    69.         <p class="appraise">来自于 117384232 的评价</p>
    70.         <div class="info">
    71.             <a href="#">Redmi AirDots真无线蓝...</a>
    72.             <span class="xian">|</span>
    73.             <span class="price">99.9元</span>
    74.         </div>
    75.     </div>
    76. </body>
    77.  
    78. </html>

     疑问解答

    1.布局为啥用不同盒子,我只想用div ?
    标签都是有语义的,合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p。

    2.为啥用辣么多类名?
    类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也方便。

    3.到底用margin还是padding ?
    大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。

    4.自己做没有思路?
    布局有很多种实现方式，同学们可以开始先模仿pink老师的写法，然后再做出自己的风格。最后同学们一定多运用辅助工具,比如屏幕画笔,ps等等。

     如何去掉无序列表前面得项目符号（小圆点）

     list-style: none;

     三、圆角边框

    1、语法和原理

    在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
    border-radius属性用于设置元素的外边框圆角。
    语法︰
     

    border-radius : length;

    radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果

     

     2、常用写法

    （1）圆形做法

    border-radius: 50%;

    或者

    border-radius: (正方形边长的一半);

    （2）其他情况

    • 参数值可以为数值或百分比的形式
    • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
    • 如果是个矩形,设置为高度的一半就可以做
    • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
    • 分开写 : border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius，也可以只写两个值，对角相同

     四、盒子阴影

    CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
    语法∶

    box-shadow: h-shadow v-shadow blur spread color inset;

     注意:
    1、默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效

    2、盒子阴影不占用空间，不会影响其他盒子排列。

     五、文字阴影

    了解即可

    在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

    语法︰

    text-shadow : h-shadow v-shadow blur color;

     Day5

    持续更新......


     

  • 相关阅读:
    给图片添加图片水印
    CSS基本讲解与使用(详解)
    babylon.js gltf scene hierarchy
    【项目实操】本地excel文档内容传到数据库中
    oracle-pl/sql -常用sql （持续更新中）
    vue中在弹框中使用form表单，取消默认的回车提交效果-刷新页面
    XSS-labs（1-10）闯关详解
    Android 12 蓝牙打开
    关于手机常见音频POP音产生的原因以及解决思路(二)——音源的开启与关闭
    网络基础知识面试题1
  • 原文地址：https://blog.csdn.net/qq_61768389/article/details/125522374