第47集
padding区域内边距(内容区与边框的距离是内边距)
padding-top
padding-right
padding-bottom
padding–left
内边距的带线啊哦会影响盒子的大小
背景颜色会影响到内边距的颜色。对于设置.box{}的时候。长宽是内容的长宽,颜色是背景颜色。padding没有设置颜色
如果不对内容去专门区分会导致颜色不清晰
可以专门选中内容区,设置颜色。
padding+border+content是可见框的大小。
padding也可以同时指四个方向。盒子可见框的大小。
第48集
外边距不会影响盒子可见框的大小。会影响盒子的其他盒子的位置关系。
margin-top
上外边距,元素会往下移动。
margin-right
margin-bottom
margin-left
元素在页面默认在左上角。如果我们设置左上回移动元素自身。而设置下元素会移动别人。margin也可以设置负值,如果指定负值会往相反的方向走。
默认情况下设置margin-right不会有任何影响。
第49集
水平布局比较麻烦
水平方向的布局由
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
来决定的
一个元素在父元素中,水平布局必须满足以下形式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容去的宽度(必须满足)
以上元素必须成立,那么就称为过度约束,那么浏览器会自动调整。如果这几个值没有auto,那么浏览器会自动调整margin-right的值。
这里面的几个值有几个可以设置成auto的情况,width margin-left margin-right可以设置成auto的情况,如果某个值伪auto救会自动调整auto的值来设置。width默认是auto。
如果将宽度和一个外边距都设置为auto,那么宽度会调整到最大,外边距auto会自己设置为0。
如果三个值都设置为auto。宽度最大。
如果将两个外边距设置为auto,width设置为固定值。两个外边距会为相同。随意我们经常会设置他在父元素中水平居中。
如果width是1000.父元素是800.那么margin-right是-200会让他相等。
第50集
垂直方向布置
默认情况下父元素的高度是被内容撑开的。设置高度的话是多少就是多少。垂直方向不用特意满足布局。
如果子元素超过父元素的大小,就会溢出。子元素会从父元素溢出。
父元素使用overflow来设置父元素如何处理溢出的子元素
overflow:visible(默认值,子元素会从父元素溢出,在外面表现出来)
或者采用hidden值,hidden值就是溢出的内容裁剪不会显示出来。scroll生成两个滚动条。来查看内容。
或者auto根据需要生成滚动条。
overflow-x单独处理水平方向的问题
overflow-y单独处理竖直方向的布局。
第51集
下外边距会影响别的元素。
外边距重叠问题
只有垂直方向相邻的外边距会发成重叠。
兄弟间的垂直相邻的外边距会取两者之间的比较大的值。
如果是负值那么往方向移动。特殊情况下,如果相邻的外边距,那么就取两者的和。
兄弟之间外边距重叠是有益的,一般是不处理的。
父子元素
父子元素之间相邻外边距会传递给父元素,这个效果不好,所以对于父子外边距折叠会影响布局,所以必须处理。
临时处理:
可以设置padding-top但是需要处理盒子大小
可以加一个border-top这样可以解决。
第52集
行内元素的盒模型
行内元素不能设置宽度和高度。
padding可以生效。但是垂直方向的不会影响布局。可能会盖住元素,但是不会影响元素布局。
行内元素可以设置border,不会影响布局。
行内元素可以设置margin,不会影响布局。
display用来设置元素显示可选值
inline将元素设置为行内元素
blank将元素设置为块元素。
inline-block将元素设置为行内块元素
行内块元素,既可以设置宽度和高度又不会独占一行。尽量避免使用。
table将元素设置为一个表格
none元素不在页面中显示。隐藏一个元素,比如说京东点开有个下拉菜单。
visibility用来设置元素显示状态
visible默认值,元素在页面中显示正常
hidden元素在页面中不显示,但是他始终占据页面中位置。
第53集
通常情况下浏览器会元素设置一些默认样式
默认样式的存在会影响页面布局。在编写的时候会去除掉默认样式。(pc端的页面)
一种情况有可能是body的外边距。浏览器会提前设置
ul去掉左边的点
list-style:none;
如果要去掉样式表的话可以这样
开发的时候会用。
*{
margin:0;
padding:0;
}
去掉样式有专门的重置样式表。自己去找找就可以了。
第54集
做练习。
55、56、57、先不看是练习。
2021-01-20
最新推荐文章于 2024-08-24 14:14:57 发布