标签：浮动 BFC 元素 笔记 学习 文档 设置 border CSS
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。