【CSS】前端学习DAY5知识点小结

最新推荐文章于 2024-05-21 23:21:19 发布

Ala_liu

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量119

点赞数

文章标签：前端 css 学习

本文链接：https://blog.csdn.net/Ala_liu/article/details/124981774

版权

盒模型

css将页面中所有的元素都设置为了一个矩形的盒子，
将元素设置为矩形的盒子之后，对网页的布局就变成了将不同的盒子摆放在相应的位置。

一. 盒子的组成

1. 内容区-content

决定盒子的大小
元素中所有的子元素和文本内容都在内容区中排列
内容区的大小由width height两个属性来设置

2. 边框-border

盒子的边缘，边框里属于盒子内部，边框外属于盒子外部
边框的大小会影响整个盒子的大小
要设置边框至少需要3个样式

边框宽度（border-width）
默认值3px
可以用来指定四个边框的宽度
说明
四个值：上,右,下,左
三个值：上，左右，下
两个值：上下，左右
一个值：上下左右）
border-xxx-width
xxx-top left bottom right
边框颜色(border-color)
默认颜色：black
可以用来指定四个边框的颜色，同上
边框样式(border-style)
默认值：none
solid dotted dashed double等等
简写属性
boder: 10px solid red ;

3. 内边距-padding

内容区和边框的距离，会影响盒子的大小
注意：盒子的大小由内容区内边距和可见框的大小共同决定
padding-top/left bottom right

简写属性

4. 外边距-margin

影响盒子的位置
不会影响盒子可见框的大小但会影响盒子实际占用空间的大小
margin-top/left 移自己
margin-bottom/right移别的元素
说明：元素在页面中是按照自左向右的顺序排列的
在默认情况下我们设置左和上外边距则会移动元素自身
而设置右和下外边距则会移动其他元素
margin也可以设置负值，元素将会向相反的方向移动

简写属性

二. 盒子的水平布局

1.元素水平方向的布局

元素在其父元素元素水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
这七个值中margin-left width margin-right 这三个值可以设置为outo

2.一个元素在其父元素中，水平布局必须要满足以下等式

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度
如果相加结果等式不成立，则称为过渡约束，则等式会自动调整。

3.调整情况

如果这七个值中没有为outo时，则浏览器会自动调整margin-right值以使等式满足
如果有outo,则浏览器会自动调整设置成outo的那个值以使等式成立
width的默认值是outo
如果将一个宽度和一个外边距设置为outo，则宽度会调整到最大，设置为outo的外边距会自动为0
如果三个值都设置为outo,则外边距都是0，宽度最大
如果两个外边距设置为outo宽度固定，则会将外边距设置为相同的值
开发过程中经常利用这个特点来使子元素在其父元素中居中
例
margin:0 outo;
width:200px;

三. 盒子的垂直方向布局

默认情况下父元素的高度被内容撑开
写了就该是多少是多少
子元素是在父元素内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值
visible 默认
hidden 溢出的内容将会被裁剪不会显示
scroll 生成滚动条，通过滚动条来查看完整内容
outo 根据需要生成滚动条
overflow-x单独处理水平方向的溢出
overflow-y单独处理垂直方向的溢出