Open yygmind opened 6 years ago
三栏布局中
child_center
的样式写的好像不对
因为没有达到自适应的效果,应该是这样:
.child_center {
height: 100px;
border: 1px solid black;
margin: 0 100px;
}
三栏布局中
child_center
的样式写的好像不对因为没有达到自适应的效果,应该是这样:
.child_center { height: 100px; border: 1px solid black; margin: 0 100px; }
我也发现了
三栏布局中
child_center
的样式写的好像不对因为没有达到自适应的效果,应该是这样:
.child_center { height: 100px; border: 1px solid black; margin: 0 100px; }
已更改,谢谢提醒
有一处笔误, 是元素消失的方法中,display:node,应该是display:none
padding的四种写法让我想起了孔乙己的回字的八种写法
grid
BFC的概率不是太清晰, 建议加些实例说明;
对于现代浏览器来说,css中指定的width就是content width。
对于IE5.x和6来说,在怪异模式中width等于content、左右padding和左右border。
其中
padding
和margin
的4种写法。1、上 右 下 左
2、上 右左 下
3、上下 右左
4、四边一致
display
和position
介绍display
规定元素应该生成的框的类型。position
: 指定一个元素在文档中的定位方式,top
,right
,bottom
和left
属性则决定了该元素的最终位置。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
因此,"left:20" 会向元素的 left 位置添加 20 像素。
(忽略 top, bottom, left, right 或者 z-index 声明)。
CSS选择器分类
不同级别:排序:!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。
同一级别:后写的会覆盖先写的。
em和strong的区别
使元素消失的方法
opacity:0
:该元素隐藏起来,但不会改变页面布局,如果该元素绑定了事件会触发。visibility:hidden
:该元素隐藏起来,但不会改变页面布局,不会触发该元素已经绑定的事件。display:node
:把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删掉。如何画一个三角形
左右边框设置为透明,长度为底部边框的一半。左右边框长度必须设置,不设置则只有底部一条边框,是不能展示的。
浮动相关
主要是为了解决父元素高度坍陷问题。
一个块级元素如果没有设置
height
,其height
由子元素撑开,对子元素使用了浮动之后,子元素就会脱离文档流。那么父元素中没有内容撑开其高度,这样父元素的height
就会被忽略。行内元素居中
DIV居中问题
1、使用flex
2、使用transform
3、使用margin-top -一半的高度
4、使用绝对布局
absolute
和margin:auto
三栏布局
要求两边两栏宽度固定,中间栏宽度自适应
center的div需要放到后面,将左右两边使用absolute定位,因为绝对定位使其脱离文档流,最后面的center会显示在正常文档流中,然后设置margin属性,留出左右两边的宽度。
center的div需要放到后面,对左右使用float:left和float:right,float使左右两个元素脱离文档流,中间的正常文档流中,然后设置margin属性,留出左右两边的宽度。
介绍BFC
BFC是CSS布局的一个概念,是一块独立的渲染区域,是一个环境,里面的元素不会影响到外部的元素 。
如何生成BFC:(即脱离文档流)
1、根元素,即HTML元素(最大的一个BFC)
2、float的值不为none
3、position的值为absolute或fixed
4、overflow的值不为visible(默认值。内容不会被修剪,会呈现在元素框之外)
5、display的值为inline-block、table-cell、table-caption
BFC布局规则:
1.内部的Box会在垂直方向,一个接一个地放置。
2.属于同一个BFC的两个相邻的Box的margin会发生重叠
3.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果,设置float
4.BFC的区域不会与float box重叠。
5.计算BFC的高度,浮动元素也参与计算
BFC作用:
1.自适应两栏布局
2.可以阻止元素被浮动元素覆盖
3.可以包含浮动元素---清除内部浮动 原理:触发父div的BFC属性,使下面的子div都处在父div的同一个BFC区域之内
4.分属于不同的BFC时,可以阻止margin重叠
CSS3特性
vh
和vw
vh
相对于视窗的高度,视窗高度是100vhvw
相对于视窗的宽度,视窗宽度是100vw这里是视窗指的是浏览器内部的可视区域大小,即
window.innerWidth/window.innerHeight
大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。交流
本人Github链接如下,欢迎各位Star
http://github.com/yygmind/blog
欢迎加我微信进一步交流或者找我内推,前行的路上,共勉!