标签：solid 标签 100px height width html2 border

边框设置
div{

/* /* border-style: solid;
border-color: red;
border-width: 10px; */
height: 200px;
width: 200px;
border: 10px solid red;

}
控制圆角
border-radius: 50%;

css盒子模型
content内容区域
padding 内边距
border 边框宽度
div{
width: 100px;
height: 50px;
border: 2px solid red;
/* padding-top: 10px;
padding-left: 5px;
padding-right: 8px;
padding-bottom: 2px;*/
padding: 10px 20px 5px 5px;
}
margin 外边距
top距离上面标签的距离
bottom距离下面标签的距离
left 距离左边标签的距离
rigth 距离右边标签的距离
margin 上右下左
.d1{
width: 100px;
height: 100px;
border: 2px solid red;
}
.d2{
margin-top: 50px;
height:100px ;
width: 200;
border: 2px solid black;
}
两个情况：
垂直方向如果上下两个标签都设置了margin外边距，那么取两者的最大的值
水平方向，两个标签都设置外边距，取两者的边距之和

浮动 float
.c1{
width: 100px;
height: 100px;
border: 5px solid red;
float: left;

}
.c2{
width: 100px;
height: 100px;
border: 5px solid blue;
float:right;
浮动会造成父级标签塌陷问题
解决方法：
1.父级标签设置高度
2.伪元素选择器清除浮动,给父级标签加上下面这个类值
.clearfic:after{
content:'';
display:block;
clear:both;
}

标签：solid,标签,100px,height,width,html2,border
来源： https://www.cnblogs.com/jtyzy/p/15192181.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。