Css 布局基础积累
0、html中常用到的块级元素与行内元素
区别：
·块级元素：
1.总是新起一行，即各个块级元素独占一行，默认垂直向下排列；
2.高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
3.宽度没有设置时，默认为100%；
4.块级元素中可以包含块级元素和行内元素。
行内元素：
1.和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
2.高度、宽度是不可控的，设置无效，由内容决定。
设置margin左右有效，有边距效果；
设置margin上下会撑大空间但是不会产生边距效果（即盒模型margin-top/bottom有值，但页面上没有边距效果）。
设置padding左右有效，设置padding上下会撑大空间但是不会产生边距效果（同上）
行内块状元素：
1.不自动换行，与其他行内元素都会在一条水平线上排列；
2.高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
3.默认排列方式为从左到右。
转换：
使用display属性能够将三者任意转换：
(1)display:inline;转换为行内元素；
(2)display:block;转换为块状元素；
(3)display:inline-block;转换为行内块状元素。
1、 常用属性
2、文本居中
列举：三种情景，1、标签元素是块级元素；2、标签元素是行内元素；3、标签元素是块级元素包裹行内元素；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>示例</title> <style> h1{ text-align: center; background-color: rgba(102, 102, 102, .4); } .span1{ display:block; text-align: center; } div{ text-align: center; } </style> </head> <body> <h1> HELLO </h1> <span class="span1"> HELLO </span> <div> <span> HELLO DIV </span> </div> </body>
https://codepen.io/mengyaosai/pen/WNdowKd
3、标签元素添加分割线（通过:before方式）
示例：(注意：1、元素必须要添加 position: relative; 2、元素:before 要必须添加
position: absolute; ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>示例</title> <style> .div1{ background-color: #fbf9f5; width: 130px; height: 130px; padding:20px; } .div2{ position: relative; background-color: #ff0000; width: 100px; height: 100px; } .div2:before { content: " "; position: absolute; right: 0; width: 2px; height: 90px; background-color: blue; } </style> </head> <body> <div class="div1"> <div class="div2"> ss </div> </div> </body>
在线示例
https://codepen.io/mengyaosai/pen/vYpyGoy
4、列表获取子元素方式
5、超出一行省略号显示
你好你好你好你好你好你好你好你好你好你好
/*超过一行显示省略号*/
.onlySingleText {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
6、指定行数省略号显示
示例：
/*line-height* -webkit-line-clamp=height*/
/*相乘关系*/
height: 48px;
line-height: 16px;
-webkit-line-clamp: 3;
/*添加省略号*/ display: -webkit-box; -webkit-box-orient: vertical; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>示例</title> <style> .div1{ background-color: #fbf9f5; width: 130px; height: 48px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; font-size:12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } </style> </head> <body> <div class="div1"> 3月21日14时38分许，东方航空公司MU5735航班执行昆明—广州任务时，在广西梧州市上空失联并坠毁。机上载有乘客123人、机组人员9人。 </div> </body>
在线示例
https://codepen.io/mengyaosai/pen/wvpoWgX
7、input去除默认边框
inout{ outline: 0px; }
8、平滑移动
//第一种 window.scrollTo({ top: 0, behavior: "smooth" //必须有的 }); //第二种 (通过锁定元素) document.querySelector("#ID").selector.scrollIntoView({ behavior: "smooth", // 平滑过渡 block: "start" // 上边框与视窗顶部平齐。默认值 });
9、flex布局
常用属性：
支持的浏览器：
