前端的初学日记（CSS篇）Day2

Mothes

已于 2023-01-12 16:25:45 修改

阅读量73

点赞数

文章标签：前端 css javascript

于 2023-01-12 15:23:31 首次发布

本文链接：https://blog.csdn.net/Mothes/article/details/128580823

版权

盒模型（box model）

盒模型
css将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局，就变成将不同的盒子摆放到不同的位置，每一个盒子都有以下几个部分组成：
内容区：content
边框：border
内边距：padding
外边距：margin

内容区（content）

内容区（content）：元素中的所有子元素和文本内容都在内容区中排列，内容区的大小用width和height两个属性来设置。
width：设置内容区的宽度
height：设置内容区的高度

.box1{
            width:200px;
            height:200px;
            background-color:#bfa;
            }

边框（border）

边框（border）：边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，边框的大小会影响整个盒子的大小。
要设置边框，需要至少设置三个样式
边框的高度border-width
边框的颜色：border-color
边框的样式：border-style
border-width有默认值，用来指定四个方向的边框的宽度
值的情况：四个值：上右下左
三个值：上左右下
两个值：上下左右
一个值：上下左右
除了border-width还有一组 border-xxx-width （xxx可以是top right bottom left）用来指定某一个边的宽度。同理border-color也有border-xxx-color。
border-color用来指定边框的颜色，同样可以分别指定四个边的边框，规则同上。border-color也可以不写，如果省略则自动使用颜色值black。
border-style指定边框的样式默认值是none，表示没有边框。
solid表示实线 dotted点状虚线 dashed虚线 double双线
border简写属性通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求。
例：border:solid 10px orange;
除了border以外还有四个border-xxx（border-top/right/bottom/left）
例：border-top:10px solid red;
如果只想解决一个
例：border-right:none;

内边距（padding）

Padding：内容区和边框之间的距离是内边距，一共有四个方向的内边距（Padding-top/right/bottom/left)
内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上。
一个盒子的可见框的大小，由内容区、内边距和边框共同决定。所以在计算盒子大小时，需要将这三个区域加到一起计算。
padding：内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样
例：

  <style>
    .box1{
      width:200px;
      height:200px;
      background-color:#bfa;
      border:10px orange solid;
      padding:10px;
    }
    .inner{
      width:100%;
        height:100%;
        background-color:yellow;
    }
  </style>
</head>
<body>
<div class="box1">
  <div class="inner"></div>
</div>
</body>

外边距（margin）

margin：不会影响盒子可见框的大小，但是外边距会影响盒子的位置。一共有四个方向的外边距：margin-top/right/bottom/left
margin-top：上外边距设置一个正值，元素会向下移动
margin-left：左外边距，设置一个正值元素会向右移
元素在页面中按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上边距则会移元素自身，而设置下和右边距会移动其他元素。

<style>
    .box1{
      width:200px;
      height:200px;
      background-color:#bfa;
      border:10px orange solid;
      margin-bottom:50px;
    }
    .box2{
      width:200px;
      height:200px;
        background-color:yellow;
    }
  </style>
</head>
<body>
<div class="box1"></div>
  <div class="box2"></div>
</body>

margin-bottom：下边距设置一个正值，下边的元素会向下移
margin-left：左外边距，设置一个正值，元素会向右移动
margin：也可以设置负值，如果是负值，则元素会向相反的方向移动
margin-right：默认值下设置不会产生任何效果
margin的简写属性
margin可以同时设置四个方向的外边距，用法和padding一样
例·：margin:100px;
margin会影响盒子实际占用空间的大小来改变位置

盒子的水平布局

元素在其父元素中水平方向的位置可以由以下几个属性共同决定
margin-left border-left padding-left width padding-right border-right margin-right
一个元素在其父元素中，水平布局必须满足以下的等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right=其父元素内容的宽度（必须满足）
如果计算结果等式不成立，则称为过度约束，则等式会自动调整。
调整情况：如果七个值没有auto的情况，则浏览器会自动调整margin-right以使等式满足。这七个值中有三个可以设置auto：width/margin-left/margin-right
如果一个值为auto：则会自动调整为auto的那个值以使等式成立
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大
如果三个都是auto 则外边距都是0，宽度最大
如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，所以我们经常利用这个特点来是一个元素在其父元素中水平居中
例：

width:xxxpx;
margin:0 auto;

<style>
    .outer{
      width:800px;
      height:200px;
      border:10px solid red;
    }
    .inner{
      width:200px;
      height:200px;
      background-color:#bfa;
      margin:0 auto;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner"> </div>
</div>
</body>

垂直方向的布局

默认情况下父元素的高度会被内容撑开，子元素在父元素的内容区中排列，如果子元素的大小超过了父元素，则子元素会从父元素里溢出，可使用overflow属性。
使用overflow属性来设置父元素如何处理一处的子元素
可选值：
visible：默认值子元素会从父元素中溢出，在父元素的外部位置显示
hidden：溢出的内容将会被裁剪，不会显示
scroll：生成两个滚动条，通过滚动条来查看完整的内容
auto：根据需要生成滚动条
overflow-x 单独处理水平方向 overflow-y 单独处理垂直方向

外边距的折叠

相等的垂直方向的外边距会发生重叠现象

兄弟元素

兄弟元素间的相邻垂直外边距会取两者之间的较大值（正值），特殊情况如果相邻的外边距一正一负，取两者的和。如果相邻的外边距都是负值，则取两者中绝对值较大的
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理，
需要进行处理的话例：

.box1{background-color:#bfa;
margin-bottom:100px;}
.box2{background-color:orange;
margin-top:100px;}

父子元素

父子元素间相邻外边距，子元素会传递给父元素（上外边距），父子外边距的折叠会影响到页面的布局，必须进行处理（1不相邻 2不使用外边距）

默认样式

通常情况下浏览器会为元素设置一些默认样式，默认样式的存在会影响到页面布局，通常情况下，编写网页时，必须要去除浏览器的默认样式（pc端页面）
（点击F12 查找elements——computed可以直接查看）
list-style:none;去除项目符号

重置样式表

重置样式表，专门用来对付浏览器的样式进行重置，直接去除浏览器的默认样式（reset.css）
利用外部文件进行导入

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,
abbr,acronym,address,big,cite,code,del,
dfn,em,img,ins,kbd,q,s,samp,small,strike,
strong,sub,sup,tt,var,b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldest,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
  display:block;
}
body{
  line-height:1;
}
ol,ul{
  list-style:none;
}
blockquote,q{
  quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
  content:'';
  content:none;
}
table{
  border-collapse:collapse;
  border-spacing:0;
}

可以练习图片列表、京东底部导航条等

盒模型的大小

默认情况下，盒子的可见框大小由内容区，内边距和边框共同决定
box-sizing用来设置盒子尺寸的计算方式（设置width和height）可选值：content-box默认值，高度和宽度用来设置内容区的大小
border-box高度和宽度用来设置整个盒子可见框的大小，width和height指的是内容区和内边距和边框的总大小

.box{width:200px;
height:200px;
background-color:#bfa;
box-sizing:border-box;}

轮廓线

outline用来设置元素的轮廓线，用法和border一模一样。轮廓和边框不同的点就是轮廓不会影响可见框的大小。
一般在：.box:hover{outline:10px red solid;}
例：

<style>
    .box{
      width:200px;
      height:200px;
      background-color:#baf;
    }
  .box:hover{outline:10px red solid;}
  </style>
</head>
<body>
<div class="box">a</div>