CSS盒子模型样式继续补充

昨夜秋风拂

于 2022-10-14 18:09:21 发布

阅读量200

点赞数

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/L20220927Y/article/details/127325421

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.默认样式的删除

方式一：

1:清除浏览器的默认样式，手写，这种方式只适用于结构简单，小的练习

方式二：

2:引入重置样式表

方式一 
* {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
}

方式二
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,
fieldset, form, input,button,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%;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
  display: block;
}
ol, ul, li{
  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;
}
 
/* custom */
a{
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track-piece{
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
html, body{
  width: 100%;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
body{
  line-height: 1;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{
  overflow-y: scroll;
}
 
/*清除浮动*/
.clearfix:before,
.clearfix:after{
  content: " ";
  display: inline-block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix{
  *zoom: 1;
}
 
/*隐藏*/
.dn{
  display: none;
}

2.水平布局

浏览器规定一个元素水平方向的7个值相加必须要等于其父元素内容区的宽度，

如果不等于的话，浏览器就会强制调整这7个值，让你相等。我们管这个过程叫过度约束

margin-left border-left padding-left width padding-right border-right margin-right

0 10 0 100 0 10 0 == 600

120 =？ 600

如何调整的

1、如果水平方向7个值当中没有auto，那么浏览器自动调整就是margin-right

0 10 0 100 0 10 380 == 600

2、水平方向7个值当中，有三个值可以被设置为auto，width、margin-left、margin-right

有1个auto ,谁是auto就调整谁

width为auto

0 10 0 580 0 10 0 == 600

margin-left

480 10 0 100 0 10 0 == 600

margin-right

0 10 0 100 0 10 480 == 600

有2个auto width、margin-left；width、margin-right；margin-left、margin-right

width、margin-left 为auto 调整的是width

width、margin-right 为auto 调整的是width

margin-left、margin-right 为auto margin-left、margin-right各占一半，把元素挤到中间

有3个auto

width、margin-left、margin-right都为auto，调整的是width

总结：有auto的话

width>margin-left、margin-right

3.垂直布局

overflow属性

可选值：

visible 默认值正常显示

hidden 剪裁多余

auto 自动根据内容显示是否出现滚动条

scroll 生成双向滚动条

4. 垂直外边距的重叠

兄弟元素

如果两个都是正值，谁大听谁的

如果两个都是负值，绝对值谁大听谁的

如果一正一负，两者相加，听最终结果

总结：兄弟元素的外边距重叠，对我们开发来讲，

一般是有利，所以不用做特殊调整

-父子元素

父子外边距重叠，它会影响页面其他元素，所以必须要调整

如何调整

1、不用margin-top，给父元素用padding-top，同时减小父元素的高度

2、在父子之间用边框隔开

3、开启元素的BFC（隐含属性）

overflow:hidden;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 100px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        
      }
.outer {
        width: 200px;
        height: 200px;
        background-color: red;
        overflow:hidden;
        /* border: 1px solid transparent; */
        /* padding-top: 100px; */
        /* margin-top: 100px; */
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <!-- 兄弟元素 -->
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->
    <!-- 父子元素 -->
    <div class="outer">
      <div class="inner"></div>
    </div>
    <p>联助知韩五落，仇生。</p>
  </body>
</html>