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.
标签:浮动,BFC,元素,笔记,学习,文档,设置,border,CSS 来源: https://www.cnblogs.com/LIUZK12345/p/16022729.html