css中盒子模型与浮动,看这篇就够了

8 篇文章 0 订阅
7 篇文章 0 订阅

css中的盒子模型 css处理网页时,他认为每个元素都包含在一个不可见的矩形盒子 盒子是由 内容区,内边距(padding),边框,外边距(margin)组成
在浏览器中,其默认样式中存在一些body等元素存在的默认样式,比如一些外边距,内边距等,它的这些默认样式
所以在编写样式之前我们需要将默认样式取消掉,在书写代码时在style中引入下面的reset.css文件即可,下面的效果不好的话,可以百度reset.css粘贴进去。
内联元素的盒模型,设置width和height无效,水平方向的内边距可以用,内联元素可以设置 垂直方向的外边距,不会影响页面的布局,即不影响其他元素的位置,仅仅是其显示效果发生变化 可以使用边框,外边距,两个内联元素的相邻外边距会相加,垂直外边距不支持!
css中的display,通过display可修改元素类型,比如块元素转化为内联元素,内联元素转化为块元素,还可以设置为内联块元素,拥有他们的共性,可以设置宽高,但又
不独占一行,比如img标签。display:none 元素不显示,也不在页面占有位置。
visiblity visiblity:none 元素不显示,但在页面占有位置。

css盒子模型中的overflow 如果子元素大小超过父元素的大小,超出父元素的内容
会在超过父元素的区域显示,父元素默认是将溢出的内容,在父元素外边显示,通过overflow可以处理溢出的内容。比如overflow:scroll/auto,添加滚动条,来查看所有内容。
文档流 文档指的是HTML的页面,每个页面都是一个文档,文档流就是处在网页中的底层表示一个页面的位置,我们创建的元素默认处在文档流中
元素在文档流中的特点。
1.块元素在文档流中会默认独占一行,默认自上往下排列,默认宽度是父元素的100%
块元素的高度默认被内容撑开。
2.内联元素在文档流中只占自身的大小,默认从左向右排列,如果一行内容纳不了所有元素则会另起一行,接着自左向右。
在内联元素,宽度和高度默认被内容撑开。
浮动(float)
块元素在文档流中默认垂直排列,如果希望块元素水平排列,可以使其脱离文档流。
在这里插入图片描述

<!-- 编译器使用小技巧,在开头空白处输入在英文输入法的前提下,输入!然后按下tab键,就可以快速生成下面的html模板,其余编译器也有相同操作 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .box1 {
            /*使用width来设置内容区的宽度
                   使用height来设置盒子内容区的高度                 
                 */
            width: 100px;
            height: 100px;
            /*
                     设置背景颜色
                   */
            background-color: #bfa;
            /*为元素设置边框,为元素设置边框,必须制定三个样式
                    缺一不可(如果不写会采用默认值)!!!!盒子的整个大小,是盒子内容区的大小
                    加上边框的大小以及内边距大小。可见框的宽度也要这样考虑计算!!!
                   */
            border-width: 10px;
            /*
                 使用border-width可以设置将边框设置不同的宽度
                 下面的规则可应用于颜色,padding,margin等等样式。
                 是按顺时针 上右下左 的添加边框的宽度
                 如果设置三个值:则为 上 (左右) 下
                 如果两个值则为上下,左右。
                 border-width:10px 20px 30px 40px;
                   */
            border-color: blueviolet;
            border-style: solid;
            /*
                 以上border的样式可以简写,
                 这个样式是同时指定四个边,不能分别指定
                 使用border-top border-left等可以分别指定各边的样式
                 且没有顺序要求:border:10px red solid;
                   */
            /*
                    内边距,指的是盒子内容区与盒子边框之间的距离
                    会影响可见框的大小,元素的背景颜色会延伸到内边距中
                   */
            padding-top: 10px;
            /*外边距是当前盒子与其他盒子的距离,且可以设置为负值,设置负值,向反方向移动,可以用来调整盒子位置
                  由于浏览器的盒子是靠左靠上摆放的,设置左上外边距,改变自身位置,
                  当设置外边距的右和下的外边距,会改变其他盒子的位置,挤动其他元素的位置
                  在网页中垂直方向的兄弟元素相邻外边距会发生重叠,会取两个外边距的最大值
                  如果父子元素的垂直外边距相邻,则子元素的外边距会设置给父元素 当两元素隔开时
                  就可以解决父子元素的外边距影响。
                  */
            margin-left: 10px;
            /* 设置元素居中 
              margin-left和margin-right设为auto,即可实现居中
              快捷写法,margin:0 auto;
            */
        }
        
        .box2 {
            width: 100%;
            height: 100%;
            background-color: aquamarine;
        }
        
        .box3 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: right;
            /* 当一个 元素设置浮动以后,元素会立即脱离文档流
            它下面的元素会向上移动,浮动的元素会尽量向左上右上飘,直到遇到父元素的边框或者其他的浮动元素
            浮动元素会在非浮动元素上一层,如果浮动元素上是一个没有浮动的块元素,那浮动不会超过块元素的位置,且不会超过上一个的兄弟浮动元素
            最多并列
            浮动的元素不会覆盖文字,文字会环绕在浮动元素的周围,可以实现文字环绕图片的效果。
            块元素脱离文档流后,宽度和高度默认由内容决定,和父元素无关
            因为内联元素不能设置宽高,脱离文档流后,内联元素会变成块元素
            浮动后 脱离文档流后,块元素和内联元素,宽高都可以设置,且有内容决定
            */
        }
        
        .box4 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        
        .box5 {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        /*
                   */
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3">1</div>
    <div class="box4">2</div>
    <div class="box5">3</div>

</body>

</html>

 -->

reset.css

reset.css @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0} body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino
Sans GB",simsun,sans-serif} h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%} h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif} h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal} address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left} caption,th{text-align:inherit} ul,ol,menu{list-style:none} fieldset,img{border:0} img,object,input,textarea,button,select{vertical-align:middle} article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1} blockquote:before,blockquote:after,q:before,q:after{content:"\0020"} textarea{overflow:auto;resize:vertical} input,textarea,button,select,a{outline:0 none;border: none;} button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent} a,ins,s,u,del{text-decoration:none} sup,sub{vertical-align:baseline} html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;} body {font-family: Arial, "Microsoft Yahei", "Helvetica
Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;} hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;} a {color: #25a4bb;text-decoration: none;}

经典页面布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>布局练习</title>
    <style type="text/css">
        html,
        body {
            height: 100%;
            /*此设置非常关键,因为默认的body,HTML高度为0,所以后面设置的div的高度无法用百分比显示*/
        }
        
        .pin1 {
            width: 50%;
            height: 50%;
            background-color: yellow;
            margin: 10px auto;
        }
        
        .pin {
            height: 50%;
            width: 100%;
        }
        
        .pin2 {
            background-color: green;
            height: 100%;
            width: 45%;
            margin: 10px;
            float: left;
        }
        
        .pin3 {
            background-color: red;
            height: 100%;
            width: 45%;
            margin: 10px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="pin1"></div>
    <div class="pin">
        <div class="pin2">2</div>
        <div class="pin3">3</div>
    </div>
</body>

</html>

全屏品字布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>布局练习</title>
    <style type="text/css">
        html,
        body {
            height: 100%;
            /*此设置非常关键,因为默认的body,HTML高度为0,所以后面设置的div的高度无法用百分比显示*/
        }
        
        .pin1 {
            width: 50%;
            height: 50%;
            background-color: yellow;
            margin: 10px auto;
        }
        
        .pin {
            height: 50%;
            width: 100%;
        }
        
        .pin2 {
            background-color: green;
            height: 100%;
            width: 45%;
            margin: 10px;
            float: left;
        }
        
        .pin3 {
            background-color: red;
            height: 100%;
            width: 45%;
            margin: 10px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="pin1"></div>
    <div class="pin">
        <div class="pin2">2</div>
        <div class="pin3">3</div>
    </div>
</body>

</html>

更多前端资料请关注公众号:前端从入门到SP

微信扫描二维码获取更多资料

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值