1.文档流介绍 网页布局的核心就是利用css来摆放盒子, 把盒子摆放在合适的位置. css的定位机制有以下3种(网页布局一般需要3种搭配使用): a.普通流(标准流) b.浮动 1.浮动只有左右. 2.浮动后找离他最近的父元素靠左/右对齐. 3.!!!一个父盒子里的子盒子,如果其中一个子元素有浮动的话,则其他子元素都需要浮动,这样才能一行显示. 4.浮动飘在标准流的上面,压住标准流. 5.浮动元素有哪些特性?(浮动影响盒子显示模式) 1.块级元素浮动后会有行内块特性 2.行内元素浮动后也具有行内…

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的.注意,以上这些理论,是指标准流中的div.无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”.显然标准流已经无法满足需求,这就要用到浮动. 浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次.例如,假设上图中的div2浮动,那么…

若元素没有设置宽高,那元素实际宽高是被内容撑起来, 若元素自己有设置宽高,那实际面积于自己的盒子模型有关 1.清除浮动的本质 清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题. (当父元素没有设置高度时,子元素又全浮动了,此时子元素脱离文档流而不占据位置,那就会出现父元素高度为0底下的盒子会跑上来.) 2.清除浮动的方法 a.额外标签法(很少用,不想添加下无意义的标签) b.父级添加overflow方法(overflow:hidden) c.利用after伪元素清除浮动 注意…

以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部分的流动性(与绝对定位相反). 一个浮动元素是float的值不为none的元素. /* Keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /* Globa…

1.中间栏先加载  !!!(若不是这个条件的话  ,那可以用  calc 或者flex布局来实现  中间栏自适应,左右栏定宽) 2.中间栏自适应   width:100% 3.左右栏固定宽 左中右  浮动  (本来应该在一行显示的,但是中间栏宽100% ,所以左右会掉下来,此时就需要设置margin-left) 左margin-left:-100% 右 margin-left:  200px(自身宽) 父元素设置padding: 0  200px  (父元素不能右宽100%,保证左右留200给左…

1.渐进增强,优雅降级 2.浏览器前缀 3.背景渐变   4.css  验证工具 2种方式:第2种支持验证本地的css(推荐) 5.css压缩  ----(节约空间,节省带宽) 6.旋转轮播图 案例: 注意: 1.3d  旋转      3d 的translateZ 2.子盒子要一般要写transform-style属性 更有3d效果 3.过渡做动画 4.父元素透视属性  有3d效果…

块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题 1.什么是BFC? 就是一个封闭独立的渲染的区域 2.什么元素会有BFC的条件? ---块级元素会有,行内元素没有 3.什么情况下块级元素可以产生bfc?(触发bfc) 四种中有一种就行,可以触发bfc BFC特性 4.BFC主要用途(块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题) 1.清除浮动 2.解决外边距合并的问题 3.做右侧自适应…

1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: outline:0/none(取消轮廓线) c.防止拖拽文本域 textarea{resize:none:} d.背景图片和背景颜色一起出现时,背景颜色在最底层. e.行内块和文字对齐 vertical-align  对块级元素不起作用 图片和文字默认基线对齐 f.去除图片底侧空白缝隙 g. 溢出的…

1.元素的显示模式 a.被动转换:浮动.绝对定位.固定定位(转换为行内块元素特性的模式---不设置宽度时,模式换行为行内块模式后宽度是内容宽度.) b.主动转换:display:block  / inline-block displsy:none(隐藏元素,不保留位置) display:block(显示元素和块级元素显示模式的意思) display:inline-block(转换成行内块模式) visiblity:hidden(隐藏元素,位置仍然保留) visiblity:visible(显示元…

1.定在某个位置:简称定位 2.浮动和定位的区别 定位的分类:定位模式 a.静态定位:(标准流) b.相对定位(不脱离文档流)---以自己左上角为基准点定位 c.绝对定位absolute  (拼爹型:完全脱离文档流---不占有位置,飘起来的) 拼爹型:绝对定位的位置和父元素有关,若父元素没有定位,那就会以浏览器左上角基准点来定位. 最常用”子绝父相”---(若父也绝对定位那父就脱标了,那父下面的的元素就上来了,那布局就又乱了.) 绝对定位的盒子水平/垂直居中---加了绝对定位的盒子用margin…