前端基础笔记05-CSS盒子模型

最新推荐文章于 2024-07-25 14:15:14 发布

前方请直行

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量212

点赞数

分类专栏：前端基础笔记文章标签： css html

本文链接：https://blog.csdn.net/w1226234212/article/details/111300734

版权

前端基础笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

- - 前端基础笔记05-CSS盒子模型

前端基础笔记05-CSS盒子模型

在前端中所有的元素也都可以称为盒子，因为元素可以有大小，需要格外注意的是盒子在页面中所占据的位置问题

元素占据的页面大小=元素的宽高+边框线大小+外边距+内边距

1.边框线-border

属性名	描述
border-width	设置边框线宽度
border-style	设置边框线样式
border-color	设置边框线颜色

div{
  width: 200px;
  height: 200px;
  /* border-width: 5px;
  border-style: dashed;
  border-color: #008B8B; */
  /* 控制四条边的样式 */
  border: 3px double #7B68EE;
  /* border-top-color: red;
  border-top-width: 5px;
  border-top-style: dotted; */
  border-top: red 5px dotted;
}

2.背景样式-background

属性名	描述
background-color	设置背景颜色
background-image	设置背景图片
background-position	设置背景图片的位置
background-size	设置背景图片的大小
background-repeat	设置背景图片是否重复
background-attachment	设置背景图片相对浏览器的定位位置

div{
  width: 1000px;
  height: 1000px;
  /* background-color: #008B8B;
  background-image: url(./timg.jpg);
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed; */
  background: #008B8B url(./timg.jpg) no-repeat;
}

3.外边距-margin

盒子与盒子之间的间距称为外边距，分四个方向（上右下左-顺时针方向）

属性名	描述
margin-left	距离左侧的距离
margin-right	距离右侧的距离
margin-top	距离顶部的距离
margin-bottom	距离底部的距离

注意：当两个相对的元素，一个使用了margin-bottom，另一个使用了margin-top，两者之间的间距取较大值

<div>
  <p></p>
  <h4></h4>
</div>

*{
  margin: 0;
  padding: 0;
}
div{
  width: 200px;
  height: 200px;
  background-color: #008B8B;
}

p,h4{
  width: 50px;
  height: 50px;
}
p{
  margin-left: 20px;
  margin-bottom: 15px;
  background-color: #7B68EE;
}
h4{
  margin-left: 15px;
  margin-top: 20px;
  background-color: #B8860B;
}

注意：当对父元素中的第一个子元素使用margin-top时，会出现margin塌陷的问题（父元素会随着第一个子元素整体下沉）

1.不让其作为第一个子元素不合适（添加了空元素有内容时会影响实际的距离）

2.给父元素添加一条边框线不合适（边框线的大小也会影响元素占据的位置大小）

3.使用内边距代替

margin可以设置块元素的水平对齐方式

div{
  margin:0 auto;//让块元素在水平方向居中
}

margin的简写

属性名	描述
margin:20px 10px 15px 25px;	分别代表上右下左
margin:20px 10px 15px;	分别代表上左右下
margin:20px 10px;	分别代表上下左右
margin:20px;	上下左右
auto	自适应

注意：margin属性对于行元素而言，margin-left可以使用，上下不生效

4.内边距-padding

盒子与内容之间的间距称为内边距，嵌套的两个盒子，以里面的盒子为中心时称为外边距，以外边盒子为中心时称为内边距

属性名	描述
padding:20px 10px 15px 25px;	分别代表上右下左
padding:20px 10px 15px;	分别代表上左右下
padding:20px 10px;	分别代表上下左右
padding:20px;	上下左右

padding在使用时，会将父元素撑开，撑开后会改变元素在页面所占据的位置大小

注意：当使用了内边距之后，宽高减去对应的值，剩下的区域大小仍然能够包裹内容大小，就适合，否则就不适合使用

5. display属性

用于改变元素的生成类型

属性名	描述
display:none;	隐藏元素
display:block;	将元素变为块元素
display:inline;	将元素变为行元素
display:inline-block;	将元素变为行内块元素

<a href="http://www.taobao.com">
  <img src="./timg.jpg" alt="" width="200px" height="300px">
  <p>图片描述文字</p>
</a>

*{
  margin: 0;
}
a{
  display: inline-block;
}

使用display属性实现导航栏效果

<ul>
  <li>
    <a href="">首页</a>
  </li>
  <li>
    <a href="">公司简介</a>
  </li>
  <li>
    <a href="">业务方向</a>
  </li>
  <li>
    <a href="">联系方式</a>
  </li>
</ul>

a{
  text-decoration: none;
  color: white;
}
ul{
  list-style: none;
  font-size: 0px;
}

/* 使用inline-block属性后，元素块之间会出现一个间距
方案：将其所在的父元素的font-size设为0，具体的元素字体大小再针对性的设置
*/
ul li{
  display: inline-block;
  width: 120px;
  height: 35px;
  color: white;
  text-align: center;
  line-height: 35px;
  background-color: darkslateblue;
}
ul li{
  font-size: 16px;
}
ul li:hover{
  background-color: #008B8B;
}
ul li:hover a{
  color: #483D8B;
}

visibility控制元素的显示与隐藏

body:hover div{
  /* display: none; */
  visibility: hidden;
}

display属性在隐藏元素时，不占据页面的位置，visibility隐藏后，位置仍然被占据着

6.浮动-float

浮动是改变元素在文档流（元素默认从上往下布局的方式就叫文档流）中的规则，让元素可以在水平方向上进行排版

float:left/right

1.浮动后的元素，不论其本身是什么类型的框，都会变成块元素

<head>
  <meta charset="utf-8">
  <style type="text/css">
    a{
      float: left;
      height: 100px;
      width: 200px;
      color: white;
      text-decoration: none;
      background-color: #008B8B;
    }
  </style>
</head>
<body>
  <a href="">没有宽高</a>
</body>

2.浮动的元素在同一行没有足够的空间显示时，会自动换到下一行

div{
  float: left;
  width: 24%;
  height: 100px;
  color: red;
  margin-right: 1%;
  background-color: black;
}
div:nth-of-type(1){
  width: 30%;
}

3.浮动后的元素会遮挡下一个未浮动的元素的区域，但不遮挡内容

<div class="header"></div>
<div class="content">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
<div class="footer">哈哈</div>

*{
  margin: 0;
}
.header{
  height: 100px;
  background-color: #483D8B;
}
.content{
  /* height: 500px; */
  background-color: #008000;
}
.footer{
  height: 100px;
  background-color: black;
}
.content div{
  float: left;
  width: 33.33%;
  height: 500px;
}
.content .left{
  background-color: #008B8B;
}
.content .center{
  background-color: #A52A2A;
}
.content .right{
  background-color: #B8860B;
}

浮动的处理方案

语法：clear:left/right/both;

1.给浮动元素所在的父元素设置固定高度常用，但父元素固定，维护修改不方便

2.给父元素的末尾添加一个空标签，指定clear属性不常用，页面中会多出很多空标签，影响浏览器的解析速度

3.给父元素设置样式overflow，对区域进行剪切处理不常用，剪切后页面中的内容会丢失

4.给父元素添加伪类样式常用方式（推荐）
/* 相当于在父元素的末尾添加了一个空的块元素 */
.clearfix:after{
display: block;
clear: both;
content: ".";
/* 增强代码的健壮性 */
height: 0;
visibility: hidden;
}

7.定位-position

浮动更多的用于对模块化（无具体像素值要求）区域进行整体排版，对于精确到像素值的页面调整需要使用定位，例如：购物车上的数量、消息通知等

属性名	描述
position:relative;	相对定位（相对默认位置进行定位，不脱离文档流，仍占据页面位置）
position:absolute;	绝对定位（相对第一个带有定位属性的父元素进行定位，默认是浏览器）
position:fixed;	相对浏览器进行绝对定位

堆叠顺序

元素在进行定位时，会出现位置相同的情况，可以通过设置其堆叠顺序决定显示的优先级

语法：z-index 数值越大越靠前

<div></div>
<div></div>
<div></div>

div{
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
}
div:nth-of-type(1){
  z-index: 1;
  background-color: #008B8B;
}
div:nth-of-type(2){
  z-index: 2;
  background-color: #483D8B;
}
div:nth-of-type(3){
  background-color: #808080;
}

注意：z-index的使用前提是元素必须要有定位属性

前方请直行

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端基础笔记05-CSS盒子模型

文章目录前端基础笔记05-CSS盒子模型1.边框线-border2.背景样式-background3.外边距-margin4.内边距-padding5. display属性6.浮动-float7.定位-position前端基础笔记05-CSS盒子模型在前端中所有的元素也都可以称为盒子，因为元素可以有大小，需要格外注意的是盒子在页面中所占据的位置问题元素占据的页面大小=元素的宽高+边框线大小+外边距+内边距1.边框线-border属性名描述border-width设置边框线宽度
复制链接

扫一扫

专栏目录