2019-04-03 回顾复习、关于边框、内边框、外边框、外边距
2019-04-03 本文已影响0人
北街九条狗
回顾复习
标签
块元素 ：默认独占一行,内容撑开高度，支持宽高
h1-h6
p
div
ul
ol
li
内联元素（行内元素，行级元素）：不独占一行，内容撑开宽高，不支持宽高
strong em/i
span
a
CSS
行间（内）样式<div id="box" style=""></div>
内部样式 <head><style></style></head>
外部样式 <link rel="stylesheet" href="css/test.css">
基础选择器
标签选择器 div{}
类选择器 .box{}
id选择器 #box{}
扩展选择器
并集选择器 div,#box,.fontred{}
后代选择器 div .fontred{}
交集选择器 p.fontred{}
属性选择器 [test=abc]{}
文字样式
font-size:20px;
font-weight:bold;
font-family:"宋体";
font-style:italic;
文本样式
color:red|#fc3|rgb(r,g,b)
text-indent:2em;
text-align:left right center;
text-decoration:underline/none;
line-height:30px;
列表样式
ul,ol
list-style:none; 去掉列表样式
伪类
hover 鼠标悬停
元素:hover{}
设置变化时间
transition:1s;
边框
border:1px solid red;
关于边框
<style >
#box1{
width: 100px;
height: 100px;
border: 1px solid #0000FF;
/* 圆角半径 */
border-radius: 20px;/*边角弧度 有一个数据管一个角，四个数据管4个角*/
/* 阴影 :x y z color*/
box-shadow: 5px 5px 10px red;
}
#box2{
width: 100px;
height: 100px;
border-bottom: 1px solid #0000FF;
border-right:2px dashed #090CFF ;
border-top:2px dashed #000000 ;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
内边框
padding: 10px; 四周边框都是10px
padding: 10px 20px; 第一个管上下，第二个管左右
padding: 10px 20px 30px; 第一个管上，第二个管左右，第三个管下
padding: 10px 20px 30px 40px; 第一个管上，第二个管右，第三个管下，第三个管右
外边框
/* 内边距 */
padding: 10px;
/* 外边距 */
margin: 10px;
外边距自动水平居中
<style >
#box{
width: 500px;
height: 20px;
border: 1px solid red;
text-align: center;
margin: 50px auto;
}
#box2{
width: 960px;
height: 500px;
border: 1px solid red;
margin: 0px auto;
}
#box3{
width: 360px;
height: 50px;
border: 1px solid red;
margin: 10px auto;
}
</style>
</head>
<body>
margin 可以方便让元素在父级元素水平居中
<div id="box">java2</div>
<div id="box2">
<div id="box3">
2
</div>
</div>
</body>
外边距的叠压问题
<style>
span{
margin: 0 10px;
}
div{
width: 100px;
height: 100px;
border:1px solid red;
}
#box1{
margin-bottom:30px ;
}
#box2{
margin-top:10px ;
}
</style>
</head>
<body>
<!-- margin的x轴方向不存在叠压问题 -->
<span>东软</span><span>睿道</span>
<!-- margin的y轴方向存在叠压问题 -->
<div id="box1"></div>
<div id="box2"></div>
</body>
外边距的传递问题
<style>
body{
margin:0;
}
#box{
background: red;
/* padding:10px; */
/* border:1px solid red; */
padding-top:10px;
padding-bottom: 10px;
}
#div1{
height: 100px;
background: yellow;
margin: 0 10px;
}
#div2{
height: 100px;
background: green;
margin:0 10px;
margin-top:10px;
}
</style>
</head>
<body>
<!--
嵌套结构中margin-top margin-bottom中存在传递问题
-->
<!-- <div style="height: 100px;background: #0000FF;"></div> -->
<div id="box">
<div id="div1"></div>
<div id="div2"></div>
</div>
<div style="height: 100px;background: #0000FF;"></div>
</body>
