ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 1.盒子模型 ![](https://box.kancloud.cn/0082f5a4583712252261fb217226e41b_500x283.jpg) - box-sizing:border-box; 设置padding,和border,它的宽度还是会保持不变 - box-sizing:content-box;(默认设置) 当设置padding和border时宽度会发生改变 # 2.float > 目的:为了让元素并排显示 ## 2.1给多个元素float 子元素float父元素的高度坍塌 ![](https://box.kancloud.cn/55ba16b28efc5bcfc4c200f5e61b2a50_500x500.png) ![](https://box.kancloud.cn/b29da7867212e417c5bce2f117ebd8ac_465x455.png) ## 2.2如何清除float ``` (1)给下面的兄弟元素给clear:both; (2)给父级加overflow:hidden; (3)用伪元素,给父级内容生成 .row:before{ display:table; content:”” } .row:after{ display:table; content:”” clear:both; } ``` demo 实现导航 ### 13.定位position ``` position:absolute | relative Relative 定位 相对定位:元素在页面上正常的位置。 ``` ``` Absolute定位 绝对定位的元素的位置相对于最近的相对定位的父元素,如果没有已定位的父元素,那么它的位置相对于<html>: 都通过left,top,right,bottom移动 z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素 ``` ``` position:fixed //例子简书 ``` demo: ### 1.搜索框 # 4.布局方式的总结 ``` 常用的布局方法 1.table表格布局 07年之前使用广泛,可以说是唯一的布局方式 2.float浮动+margin(经典) 3.inline-block布局 —— (有小问题设置父元素的font-size:0) 4.flexbox布局(正统的布局方式) 5.实现元素的垂直水平居中 ``` - 第一种 ``` 父元素设置parent{position:relative;} 子元素设置 child{ position:absolute; left:50%; top:50%; margin-left:-50%*child*width; margin-top:-50%*child*height; } ``` - 第二种 ``` parent{ position:relative; } child{ position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } ``` ### 6.css样式的几种引入方式 - 外部样式表 ``` <link rel="stylesheet" type="text/css" href="/c5.css"> ``` - 内部样式表(位于 标签内部) ``` <style> p{color:pink;font-size:16px} </style> ``` - 内联样式(在 HTML 元素内部) ``` <p style="color:pink;font-size:16px">hello world</p> ``` 给同一选择器设置同一样式,离元素近的样式设置方式优先级高 ### 7.绝对路径和相对路径 **绝对路径:从盘符开始的路径 ** ``` <img src="D:/images/down.jpg" alt=""/> ``` **相对路径:相对当前文件所在的路径 ** ``` 同级目录 src='down.jpg' 下一级目录 src='images/down.jpg' 上一级目录 src='../down.jpg ``` ### 8.定位的宽高继承问题 ``` 父元素给position:relative 子元素position:absolute 子元素绝对定位,不会继承父元素的width ```