首页 > 代码库 > HTML CSS 层叠样式表 三
HTML CSS 层叠样式表 三
一、盒子模型 包括外边距margin 边框border 内边距padding 和元素本体
#id{
marigin:10px; 外边距上下左右都是10像素； 外边距可以设置成盒子与盒子之间的距离
padding:20px; 内边距上下左右都是20px； 内边距会使元素变大
margin-top:30px; 单独设置某个边距为30px；内外边距皆可。top上 bottom下 left左 right右
padding:1px 2px 3px 4px; 分别设置上右下左的边框为1，2，3，4.如果写两个值，则为上下，左右。如果写三个值 为上，左右，下
}
#id-1{id元素里的子元素。
margin:0px auto; 水平居中 auto是自动的意思
z-index:1; 在z轴的上的索引值，用于给元素确定上下顺序，按数字大小排可用数字为负无穷到正无穷，在排序使用时最好按照间隔为10的数字排序，方便以后修改。
overflow:hidden; 元素溢出内容属性 visible不修剪 会呈现在元素框之外 默认 hidden修剪并隐藏溢出内容 scroll加滚动条 auto自动 如果溢出就加滚动条
visibility:hidden; 可视性 hidden隐藏 visible可见 但是依然占据位置
display:none; 占据空间 none 不占位置 block 作为块级元素前后换行 inline 作为内联元素 前后不换行
opacity:0.5; 透明度 0-1 0为全透明 1为不透明
border-radius:10px; 元素倒圆角 可以填像素也可以填百分比。四个角都倒
border-bottom-left-radius:20px; 单倒一个角 下右 下左 上右 上左
border-bottom:10px solid red; 单加一个方向的边框
text-shadow:2px 2px 2px black; 文字阴影 同元素阴影
}
二、列表方块
.li{ 用于修改ul或ol的属性
list-style:none； 列表不加序号
margin-left:10px; 用于解决列表序号偏左出了元素边界的问题
list-style-image:url(引用的图片.jpg)；用图片替换列表的序号
}
三、课上练习
<style>
* {
margin:0px;
}
#d1 {
width:200px;
height:200px;
background-color:red;
color:white;
margin:10px 20px 40px 30px;
padding:10px;
/*margin-bottom:10px;*/
/*overflow:hidden*/
/*visibility:visible; hidden
display:block; none*/
}
#d2 {
width: 200px;
height: 200px;
background-color: yellow;
color:black;
margin-left:20px;
overflow:hidden; /*scroll*/
opacity:0.9;
/*border-radius:50%; 20px*/
/*border-bottom-right-radius:20px;*/
border-bottom:10px solid red;
text-shadow:2px 2px 1px red;
}
#d1-1 {
width:50px;
height:50px;
background-color:green;
/*margin:-20px 0px 0px 0px;*/
margin:0px auto;
/*z-index:-1;*/
}
li {
/*list-style:none;*/
list-style-image:url(img/apple.png);
}
.rongqi {
border:2px solid black;
}
</style>
<body>
<div id="d1">
<div id="d1-1">一个</div>
</div>
<div id="d2">
<p>两个</p><p>两个</p><p>两个</p><p>两个</p>
<p>两个</p><p>两个</p><p>两个</p><p>两个</p>
<p>两个</p><p>两个</p><p>两个</p><p>两个</p>
</div>
<div class="rongqi">
<ul>
<li>一列</li>
<li>二列</li>
<li>三列</li>
<li>四列</li>
<li>五列</li>
</ul>
</div>
</body>
四、效果图
HTML CSS 层叠样式表 三