css盒子模型
- 什么叫盒子模型
-
浏览器在渲染网页时，把网页中的元素当做一个个矩形区域来显示,所以标签可以叫做元素也可以叫做盒子。
-
css中规定一个盒子分别由：内容区域(content)，内边距区域(padding)，边框区域(border)，外边距区域(margin)构成。
- 内容区域的宽度和高度
- 盒子内容(content)：由width和heighht属性默认设置的是盒子的内容大小。
- 边框
- 边框属性名：border(border是一个复合属性);
- 一般书写方法：border：1px solid red;
- solid属性一般能设置三种：solid(实线),dashed(虚线),dotted(点线);
- border可以单独设置四边的样式。
- 内边距
- 属性名：padding(上 右 下 左)。
- 外边距
- 属性名：margin(上 右 下 左)。
- {margin:0 auto}。auto可以居中，设置了宽度，auto会自动用父元素宽度-自身宽度／2设为左右间距。
- 行内标签设置margin或padding垂直效果不生效(设置行高就行了)。
- 外边距折叠现象-合并现象
- 块级元素垂直布局margin会合并取最大值(忽视就好)。
- 外边距折叠现象-塌陷问题
- 块级元素嵌套，子元素margin-top会作用在父级元素上，导致父级元素一块下移。
解决办法：
- 给父元素设置border-top或者padding-top(分割父子元素的的margin-top)；
- 给父元素设置overflow:hidden;
- 转成行内块元素；
- 设置浮动。
- 设置了边框内外边距会自动加在盒子的宽高上
- 解决办法：设置內减模式：box-sizing:border-box;
- 一些标签自带默认的样式
- 清除默认内外边距可以用：
- {padding:0;margin:0;}
- 清除a标签下划线：
- a{text-decoration:none}
- 清除列表样式：
- li{list-style:none;}
结构伪类选择器
- 作用：根据元素在html中通过结构关系查找元素的选择器。
- 优势：减少html中对类的依赖，有助于保持代码整洁。
- 场景：常用与查找父级元素的子元素。
- 标签名:first-hild{} ——>查找父元素中第一个这个标签名的元素。
- 标签名:list-hild{} ——>查找父元素中最后一个这个标签名的元素。
- 标签名:nth-hild(n){} ——>查找父元素中第n个这个标签名的元素。
- 标签名:nth-list-hild(n){} ——>查找父元素中倒数第n个这个标签名的元素：
- 设置相同样式的时候n可以写公式2n(所有的偶数项),2n+1(所有的奇数项),-n+5(前五项),n+5(第五项以后的)。。。<n取值从0,1,2,3...>
伪元素
- 由css模拟的标签效果：一般页面中的非主题内容可以使用
::before 在父元素内容的最前添加一个伪元素
::after 在父元素内容的最后添加一个伪元素 - 伪元素必须设置congtent属性才能生效。
- 伪元素默认是行内元素。
浮动
浮动的作用
- 早期作用：图文环绕。
- 现在的作用：网页布局。
浮动的特点
- 浮动元素会脱离标准流，在标准流中不占位置。
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素。
- 浮动找浮动，浮动元素会在上一个浮动元素的后面显示(顶对齐)。
- 浮动元素有特殊的显示效果：行内块的显示和效果。
- 当宽度不够时浮动元素会自动换行。
清除浮动
- 如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。
- 因为子元素浮动后脱离标准流，不占标准流的位置。
- 清除浮动的目的：需要父元素有高度，从而不影响其他网页元素的布局。
清除浮动的方法：
- 直接设置父元素的高度(简单方便，但是有些布局不允许我们固定父元素的高度)。
- 额外标签法：在父元素内容的最后添加一个块级元素并设置clear:both(额外的标签，使代码复杂化)。
- 单伪元素清除法：用伪元素代替了额外标签法——>
- .clearfix::after{content:'';display:block;clear:both;(height:0;visibility:hidden;这两个属性时候解决浏览器兼容性的)}
- 双伪元素清除法：
- .clearfix::before,.clearfix::after{content:'';display:table;}(这个时是为了解决外边距塌陷问题)
- .clearfix::after{clear:both;}
- 直接给父元素设置overflow:hidden;
