CSS学习笔记（3）
1.关于盒子的大小
默认情况下,盒子可见框的大小由内容区.内边框和边框共同决定
box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用)
content-box:宽高用来设置内容区的大小
border-box:宽度和高度用来设置盒子可见框的大小
会自动调整内容区的空间(边框边距不变)以适应设置的可见框大小
2.轮廓阴影和圆角
(1.)轮廓: outline用来设置轮廓线和border用法一样,
与border不同的是outline不会影响布局,虽然也会使可见框变大,但会覆盖其他元素,不会挤掉其他元素.
(2.)阴影:box-shadow,默认为当前盒子大小,会被盖住,所以需要偏移量使其显示
如box-shadow:10px 10px black(颜色);
第一个值设置水平偏移量,正值向右移动;
第二个值设置垂直偏移量,正值向下移动;
第三个值设置模糊半径,越大越模糊
第四个值设置阴影颜色(RGB可以顺带设置透明);
(3.)圆角:border-radious
border-top-radious之类...可以单独设置四个角的样式
例如border-top-left-radious:xxpx xxpx;
如果是一个值会把水平垂直半径都设置为xxpx然后画一个圆;
如果设置两个值第一个设置水平半径,第二个设置垂直方向半径,如果两个值不一样,会设置出椭圆效果;
border-radious:... .... ...;
四个值 左上.右上.右下.左下
三个值 左上 右上左下 右下
两个值 左上右下 右上左下
如果是设置border-radious:50%,那么它就会变成一个圆形
3.浮动可以使一个元素向其父元素的左侧或者右侧移动
使用float属性来设置元素的浮动
可选值:
none默认值,元素不浮动
left元素向左浮动
right元素向右浮动
注意:a.设置float属性后,水平布局的等式便不需要强制成立;
b.设置浮动后便会从文档流中脱离,不再占用文档的位置
c.所以元素下边的还在文档流中的元素会自动向上
d.浮动元素默认不会从父元素中移出,即父元素是它的边界
e.浮动元素不会盖住其他的浮动元素,不会超过它前边的其他浮动元素
f.浮动元素上面是非浮动元素,则无法上移
g.浮动元素无法超过它浮动的兄弟元素,最多一样高
4.浮动的特点
(1)浮动元素不会盖住文字,文字会环绕在浮动元素周围,形成文字环绕效果
(2)元素脱离文档流后会发生一些现象
a.块元素:不再独占一行,宽度和高度都被内容撑开
b.行内元素:可以手动设置宽高,默认宽高被内容撑开
总结;块元素和行内元素脱离文档流后都变成了一种类型的元素.
它默认宽高被内容撑开,不独占一行,但可以手动设置宽高,与行内块元素相似.
5.简单的布局
头部标签header,主体标签main(只能有一个main标签),底部footer
6.高度塌陷和BFC
高度塌陷:当父元素没有设置固定宽高时而且子元素设置浮动后(此时父元素默认高度由子元素撑开),会脱离文档流造成父元素的高度丢失.
高度塌陷后下面的元素自动上移,影响页面布局,所以需要进行处理
这时可以用BFC(块级格式化环境):
BFC的特点:(1.)开启BFC的元素不会被浮动元素所覆盖
(2.)开启BFC的元素子元素和父元素的外边距不会重叠
(3.)被设置BFC的元素可以在不固定高度的情况下包裹住浮动的子元素
开启BFC的方式有很多,但各有各的缺点
最推荐的是设置overflow:auto或者hiddden;
7.clear
比如两个元素box1.box2,对box1设置浮动后,box2会上移,
这时可以给box2设置clear消除box1浮动元素的影响,实际上是给box2添加了一个外边距使其位置与原来位置相同(但在开发者工具中不显示)
clear:left(清除向左浮动元素影响) right(清除向右浮动元素影响) both(清除最大的元素的影响)
此时可以用clear来完美解决高度塌陷问题:
box1(父)+box2(子).给子元素设置浮动,由于父元素默认由内容撑开,这时父元素发生塌陷,
这时可以给box2添加一个兄弟元素box3,空内容,但是设置clear:both,这时它会消除box2的影响,即添加box2高度的上外边距,
使得box1被正常撑开;
但是这里使用的是结构(即添加标签,属于html)解决的问题,如果是想用css解决问题,可以box2::after伪类增加一个虚拟行内元素,将其改为块元素(display:block或者table).
content设置为空,这时便可解决问题.
8.如何解决子父元素重叠问题.
可以给父元素设置::before{content:' ';display:table,};(给父子元素之间设置某个东西就可以阻断外边距在父子元素之间的传导)
此时我们可以在style设置一个类名clearfix,
在此类名添加befor和after{content:'',display:table,clear:both},然后给要解决的元素加上clearfix类名(多个类名相同不变,不同的会覆盖),
完整的是clearfix:before,clearfix:after{content:'',display:table,clear:both}(并集选择器,相当于两个分别的样式现在合并到一起写)
但好像有个问题?解决高度塌陷是给子元素设置after,解决外边距重叠是给父元素设置before,如果把clearfix套在一个元素上,它真的能同时解决吗?
解答:相当于给一个具体元素同时设置了这两种状态,如果它是下一个元素的父元素,是上一个元素的子元素倒是能同时解决,如果不是这情况不能同时解决;
9.相对定位
定位(position)
定位是一种更加高级的布局手段,通过定位可以把元素摆放到页面的任意位置,
position(可选值):a.static 默认值,没有开启定位
b.relative 开启元素的相对定位
c.absolute 开启元素的绝对定位
d.fixed 开启元素的固定定位
e.sticky 开启元素的粘滞定位
相对定位特点:(1.)开启相对定位后,如果没有设置偏移量,则不会发生变化;
(2.)相对定位的原点是它原来在文档流中的位置,然后可以设置left/right/top/bottom来设置它的位置
(3.)开启相对定位后,元素不会脱离文档流,但会提高元素层级
(4.)虽然移动了位置,但原来的位置还是被占据,相当于灵魂出窍?
10.绝对定位
开启绝对定位后:(1.)元素脱离文档流,获得脱离文档流元素的特点(宽高默认被内容撑开,但可以手动设置),但如果不设置偏移量的话不会移动(默认偏移量是保持原位置)
(2.)元素的层级提升
(3.)绝对定位的元素相对于包含块进行定位(包含块指最近的开启定位的祖先元素),
如果所有的祖先元素都没有开启定位,则相对于根元素html开启定位(html成为包含块)
11.固定定位
特殊的绝对定位,只不过原点永远是视口的左上角(视口就是所看到的页面)
12.粘滞定位
不脱离文档流,相对于视口进行定位,比如设置top:100px,那么在向下滚动的时候,该元素在距离上面100px便会固定.
13.绝对定位元素的性质
水平布局:当开启绝对定位后,相对于包含块父元素,那么在水平方向上需要满足left+mar+bor+pad+wid+pad+bor+mar+right==包含块父元素的宽度
发生过渡约束时如果没有auto,默认调整right
如果wid是auto,wid最大;且left和right默认是auto,优先级:wid>left>mar;
垂直布局:top+mar+bor+pad+hei+pad+bor+bottom==包含块父元素的高度
在文档流中没有强制要求,但在绝对定位中有要求
此时的优先级也是hei>top>mar,这事可以把top和bot归零,把mar设置auto,便可以实现垂直居中.
