<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 100px; height: 100px; background-color:red ; border: 10px solid green;
/*margin:[外边距] * margin属性值最多有四个 * ①只写一个值，四个方向的margin均为这个值 * ②写两个值，上、右两个方向；下默认=上，左默认=右 * ③写三个值，上、右、下 左默认=右 * ④写四个值，上、右、下、左; * ⑤写三个值加auto控件居右显示 * margin：50px 30px 20px auto;居右显示，距右侧30px * margin:0 auto设置控件在父容器中水平居中（块级元素水平居中） * */ /*[border边框] boder有三个属性值：宽度（width） 样式（style） 颜色（color） 原则上三个属性都要指定，color默认为黑色 [padding内边距] 同margin的①②③④ 注意：使用padding 会将整个空间撑大，使用时需注意可视区域的实际大小*/ /*/* [border-radius 圆角] * 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴 * 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px; * 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角 * 例如：border-radius: 50px 0px ; * =border-radius: 50px 0px 50px 0px; * =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px; * * 3、只写一个数，默认8个值均相等。 */ /* [border-image 图片边框] * 1、十个属性： * ① 图片路径：url() * ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。 * 写的时候，不能带px单位 * ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框 * 写的时候，必须带px单位 * ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺) * 【铺满和平铺区别】 * 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标； * 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。 * * 2、属性值写法：border-image: ① ②/③px ④; * 第②部分可以只写1个、2个、3个，判断方式同margin */
<body>
<div> </div> </body></html><!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*[绝对定位] 1 使用position:absolute;设置元素为绝对定位元素 2 定位机制： ①相对于第一个非static的祖先元素进行定位（即使用了relative、absolute、fixed的祖先元素） 进行定位，如果所有祖先元素均未定位，则相对于浏览器左上角进行定位 ②使用absolute的元素，会从文档流中删除，原有空间释放不再占有 【固定定位 fixed】 1 position:fixed;是一种特殊的绝对定位，父容器无法使用relative锁住 2 定位机制：永远相对于浏览器进行定位 【Z-index】 1 设置定位元素的Z轴重叠顺序 2 使用要求：①必须是定位元素才能使用。relative、absolute、fixed ②使用z-index需要考虑父容器的约束。如果父容器为z-index：auto, 则子容器的z-index可以不受父容器的约束；如果父容器z-index进行了设置，则子容器的 层叠将以父容器的z-index为准（在同一父容器的不同子元素，扔可以通过自己的Z-index调整 层叠关系） 3 z-index:auto& z-index:0 的异同 ①z-index:auto为默认值，与z-index：0处于同一平面 ②z-index:auto，不会约束子元素的z-index层次，而z-index：0，会 约束子元素必须与父元素处于同一平面 4 z-index相同（处于同一层面的定位元素）的层叠关系：后来者居上 z-index默认为auto*/ .div1{ width: 100px; height: 100px; background-color: red; margin: 0 auto; position:absolute; /*绝对定位元素水平居中的方式 1 left:50% 2 设置margin-left为-width/2 */ } .div1-1{ width: 50px; height: 50px; background-color: blue; /*margin: 0 auto;*/ position:absolute; } .div2{ width: 100px;, height: 100px; background-color: yellow; } .div2-1{ width: 50px; height: 50px; background-color: green; } </style> </head> <body> <div class="div1"> <div class="div1-1"> </div> </div> <div class="div2"> <div class="div2-1"> </div> </div> </body></html><!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width:100px ; height: 100px; background-color:red ; /*【相对定位 relative】1、使用position：relative；设置元素为相对定位的元素
2、定位机制 ①相对于自己原来文档流中的位置定位，当不指定top等定位值时， 不会改变元素位置。 ②相对定位元素仍会占据原有文档流中的位置，而不会释放 3、使用top、left、bottom、right调整位置。当left和right同时存在， left生效，当top和bottom同时存在，top生效 */ position: relative; top:50px; left: 50px; } .div2{ width:100px ; height: 100px; background-color:green; } </style>> </head> <body> <div class="div1"> 这是第一个div </div> <div class="div2"> 这是第二个div </div> </body></html>