重头学习html5+css3系列笔记（6）

最新推荐文章于 2024-07-17 12:21:01 发布

shadow fish

最新推荐文章于 2024-07-17 12:21:01 发布

阅读量387

点赞数

分类专栏：笔记文章标签： html5 css3 css html

本文链接：https://blog.csdn.net/qq_45862085/article/details/108922377

版权

笔记专栏收录该内容

24 篇文章 2 订阅

订阅专栏

盒子模型

盒子模型组成

所谓盒子模型就是把html页面内的布局元素看作一个盒子，装内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距，实际内容

边框（border）

border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）边框样式边框颜色
border ：border-width || border-style || border-color

border-style属性值

solid ：实线边框
dashed：虚线边框
dotted：点线边框
还有outset ridge groove等值，但兼容性不好

边框的复合写法

border: 12px solid red;

无先后顺序，不需要都写出来，但不声明样式会不显示

某一条边框

 border-top: 12px solid red;

合理利用层叠性可以简化代码（感觉也是我之前得出的结论，先找共同点，再写不同的）

  border: 12px dashed blue;
  border-top:  solid red;
  border-bottom:  solid #000;

但是border-top和bottom的宽却不是12px？这里理解的是可能会自动填补未声明的属性

合并相邻的边框

两个边框重叠在一起时会变粗（1+1=2），这时可以用border-collapse: collapse;属性，使1+1=1（不知道这个属性之前想的是可以使用某一条边）

边框对盒子实际大小的影响

当加入边框时，会增加盒子实际的大小（也就是宽度，高度不包括边框宽度）

内边距（padding）

用于设置内边距，即边框与内容之间的距离
也可以分为left top right bottom四个部分

padding简写属性

项目	属性
padding：5px	1个值，代表上下左右都是5px
padding：5px 10px	2个值，代表上下是5px，左右是10px
padding：5px 10px 20px	代表上是5px，左右是10px，下边距是20px
padding：5px 10px 20px 30px	顺时针从上开始

内边距会撑大盒子

如果盒子已经有了宽度和高度，增加内边距会使盒子变大
当一系列盒子内字数不同时，比如导航栏每个小盒子内容不一样，这时不能设置宽度了（会因字数不同导致盒子与盒子间距离不同）这时可以只设置内边距相等即可，宽度不需要设置（此时盒子会根据内容自动变化宽度），让内边距自由撑开，使没个盒子之间的距离看起来相等（这一个例子让我明白了作为前端程序员对细节需要把握到一个魔鬼的程度。。。）

 .nav2 a {
            display: inline-block;
            color: #4c4c4c;
            text-decoration: none;
            height: 42px;
            padding: 0 20px;


        }

如果盒子本身没有指定width/height属性，则增加padding不会撑开盒子大小（例如，当盒子宽度为100%，有了内边距也不会超出父容器），换言之，如果声明了宽度，当在声明padding时，可能会超出父容器

外边距（margin）

利用外边距可以实现块级盒子水平居中

盒子需要设定宽度（不设定宽度盒子会继承父元素的宽度，那居中就没有意义了）
声明：margin: 0 auto;

如果是使行内块元素或行内元素居中对齐，只需为父元素添加 text-align: center;

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

对于两个嵌套关系的块元素，当子元素有外边距时，此时父元素会塌陷较大的外边距值（与父元素本身的外边距比较大的），只有第一个子元素才会出现这个状况

<div class="margin">
        <div></div>
        <div></div>
    </div>

 .margin {
            margin: 0 auto;
            background-color: blue;
            height: 200px;
            width: 100px;
            text-align: center;
        }
  .margin div {
            margin-top: 50px;
            background-color: pink;
            width: 50px;
            height: 100px;
        }

会发现第一个子元素div带动着父元素下降，即变成父元素的外边距，但第二个不会
解决方案

为父元素加边框，恩情决断框（hhh）border: 1px solid transparent;
为父元素定义内边框
为父元素添加overflow: hidden;

在测试中发现margin-right不会产生类似塌陷的

清除内外边距

一般是css代码第一行

 * {
            margin: 0;
            padding: 0;
        }

行内元素为了考虑兼容性，尽量只设置左右内外边距，就算设定了上下内外边距，也不一定生效，但是转化为块元素或行内块元素就可以设置

清除无序列表的小圆点

 list-style: none;

圆角边框

设置元素的外边框圆角 border-radius: 10px;
radius（圆的半径），长度代表圆的半径，该半径的圆与边框相切时，直角弧会被相应的圆边长取代，进而使边框呈现圆角，半径越大，弧度越大
长度参数可以用长度或百分比表示，因此设置圆形时，可以将参数调节为高度和宽度的一半，或直接写成50%
该属性是一个简写属性，还可以进一步确实四个角的弧度
写四个值，则是从左上角顺时针，两个值则是分别对应左上右下，左下右上