html2
2021/8/27 6:07:28
本文主要是介绍html2,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
边框设置
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;
}
这篇关于html2的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-24Vite多环境配置学习:新手入门教程
- 2024-11-23实现OSS直传,前端怎么实现?-icode9专业技术文章分享
- 2024-11-22在 HTML 中怎么实现当鼠标光标悬停在按钮上时显示提示文案?-icode9专业技术文章分享
- 2024-11-22html 自带属性有哪些?-icode9专业技术文章分享
- 2024-11-21Sass教程:新手入门及初级技巧
- 2024-11-21Sass学习:初学者必备的简单教程
- 2024-11-21Elmentplus入门:新手必看指南
- 2024-11-21Sass入门:初学者的简单教程
- 2024-11-21前端页面设计教程:新手入门指南
- 2024-11-21Elmentplus教程:初学者必备指南