#默认a不支持宽高,设置display:block就可以显示宽高
#inline不支持宽高
''' what|why: 让块级(block)标签在父级的宽度限制下同行显示, 一行显示不下, 自动换行 注: 要到达一行显示个数固定, 一定要固定父级的宽度 哪些标签需要同行排列,哪些标签就做同行处理 语法: 子级 { float: left|right; } 问题: 子级不再撑开父级高度 (不完全脱离文档流) (个人理解:在浮动标签下面加一个比浮动标签小的标签,浮动标签直接覆盖掉了这个小标签,这是因为子级不再撑开父级的高度造成的.) 脱离文档流: => 层次结构会上移, 覆盖有位置重叠且没脱离文档流的标签(个人理解:在浮动子级标签的下面加一个面积比浮动子级小的正常标签,这个正常标签会被浮动子级完全覆盖) 不完全: 浮动布局后, 可以重新让子级撑开父级高度 清浮动: 让不完全脱离文档流的子级重新撑开父级的高度, 这种做法就叫做清浮动 给谁请浮动? 谁的高度没有被浮动子级撑开,谁来清浮动 语法:(content,display,clear三者缺一不可) 父级:after { content: ""; dislpay: block; clear: both; } <!--了解--> <!--:after | :before 伪类 -> 内容--> <html> <head> <style> .box:after { display: block; content: "000"; } .box:before { display: block; content: "***"; } </style> </head> <body> <div class="box">123</div> </body> </html> after | before:操作文本内容 *** 123 000 为什么清浮动用after? 浮动布局出现问题以后才清浮动 '''
''' what|why: 盒子相对于屏幕完成位置布局, 不会随着屏幕内容的滚动而滚动(相对于屏幕窗口是静止的), 且和页面内容发生重叠时, 该布局下的内容显示层次更高(覆盖其他内容) 父类盒子一旦固定位置,子类盒子也会固定位置 但子类盒子固定位置,父类盒子不会固定位置 语法: position: fixed; /*固定定位总结: 1.参考系为页面窗口 2.一旦盒子设置了定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局 top: 距离 bottom:距离 left:距离 right:距离 3.上下同时出现取上, 同理左右取左 4.固定定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度) 5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子, 两个完全脱离文档流盒子的显示层次如果没有设置的话,是会后面的覆盖前面的,要想改变显示层次的顺序,可以设置z-index属性(脱离文档流盒子特有的)来改变显示层次的顺序(z-index值大者覆盖值小者) */ '''
''' what|why: 兄弟标签之间不相互影响, 都参照父级的显示区域来完成布局 语法: position: absolute; /*绝对定位总结: 1.参考系为最近的定位父级(父级一般采用相对定位relative来辅助子级绝对定位),注意:最近的定位父级,采用相对定位,如果采用固定定位和绝对定位,父级也会脱离文档流,然后位置会发生改变. /*父级一般情况下只是为了给子级绝对定位提供参考系 子级绝对定位下,必须要求参考系拥有定位 父级可以选取fixed|absolute定位,就会成为子级的参考系, 但是父级自身的布局就会因为fixed|absolute完全脱离文档流的特性,影响自身的布局 如何达到: 父级又能定位(为子级做参考), 又不脱离文档流(自身布局不收影响) 解决方案: 父级采用 相对定位(父相子绝) */ 2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局 3.上下同时出现取上, 同理左右取左 4.绝对定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度) 5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子, 两个完全脱离文档流盒子的显示层次可以z-index属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者) */ '''
''' what|why: 核心用处 => 父相子绝 语法: position: relative; /*相对定位总结: 1.参考系为自身原有位置 2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局 3.top = -bottom | left = -right (上下取上, 左右取左) 4.相对定位 不脱离文档流 => 不会影响自身布局, 自身布局采用的还是原来的布局 注: 相对定位定位方位只会改变显示图层, 不会改变盒子的原有位置, 原有位置不变就不会影响兄弟盒子 '''
''' 注意: 参考系为窗口就是固定定位,参考系为父级就是绝对定位 top | bottom | left |right是设置了定位属性的盒子的特有属性 z-index是脱离文档流的盒子的特有属性 '''
/*持续时间*/ /*transition-duration: 3s;*/ /*延迟时间: 默认0*/ /*transition-delay: 1s;*/ /*过渡属性: 默认all | 属性1, ..., 属性n | eg:height, background-color */ /*如果只设置某个属性那么该属性渐变,其它属性顺便*/ /*transition-property: all;*/ /*过渡曲线: 默认ease*/ /*ease | ease-in | ease-out | ease-in-out | linear(匀速) 贝塞尔曲线:cubic-bezier(0.83, 1.46, 0, -1.29)*/ /*transition-timing-function: cubic-bezier(0.83, 1.46, 0, -1.29);*/ /* 简写 */ /* 持续时间 延迟时间 过渡属性们 运动的贝塞尔曲线*/ /*transition: 2s 1s all cubic-bezier(0.83, 1.46, 0, -1.29);*/ /*一般书写如下*/ /*transition: .3s linear;*/ /*需求: 没有高度时, 将所有子级内容隐藏*/ .box { /*超出自己范围的内容如何处理*/ overflow: hidden; }