web前端基础-css-尺寸边框

时间 2020-01-06

标签 web 前端基础 css 尺寸边框栏目 HTML 繁體版

原文原文链接

尺寸和边框:html

1、尺寸浏览器

　　行内元素是不能设置宽和高的，其高度是由元素里面的内容的高度撑起来的；ui

　　行内块元素能够设置宽和高，当行内块元素没有设置宽高的时候，行内块元素的宽高是其默认的宽高；spa

　　块级元素：能够设置宽高，可是若是没有设置宽，则其默认宽度是该块级元素的父级元素的宽度的100%；若是没有设置高度，则该该块级元素的默认高度是由该块级元素内部的内容撑起来的高度，如若块级元素　　　　　　　　中没有内容，则默认高度为；code

2、溢出处理htm

　　当一个元素里面的内容量过大且该元素的尺寸大小又不足以彻底能容纳下该元素里面的内容时，则会发生溢出想象；默认的溢出状况是垂直方向溢出容纳不下的内容，而且将溢出的内容显示出来，代码以下：blog

<!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>
        div{
            width:200px;
            height:200px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea delectus at nobis consectetur doloremque aliquam ratione repudiandae, incidunt temporibus quis aperiam animi iusto, consequuntur cum facilis quos perspiciatis voluptates ullam?
    </div>
</body>
</html>

这里关于overflow的几个取值入下：ip

　　overflow:scroll(无论是否溢出，水平和垂直都添加滚动条)

　　　　　　hidden(隐藏溢出的内容)

　　　　　　auto(只在有溢出的地方添加滚动条)

　　　　　　visible(默认值)

　　常见的块级元素：div , h系列 , li , dt ,dd，以及p标签元素；

　　常见行内元素：span , a , b , i , u , em;

实现水平溢出的方法：能够将盛放内容的块级元素或ha'e行内块元素的宽度设置为比其该元素的父元素的宽度更大便可实现水平溢出；

3、边框 border

　　border设置时的简写方式：border:width style color;

　　width:边框的宽度（就是边框的粗细程度);

　　style:边框线的样式，大多数状况下取值为solid(边框线为实线),固然也有其它取值；

　　color:边框线的颜色；

　　单个设置某一个方向是否有边框：border-top/border-left/border-right/border-bottom:width style color;

　　边框的阴影:box-shadow：h-shadow v-shadow blur spread colorci

　　　　h-shadow:水平方向阴影的偏移量rem

　　　　v-shadow:垂直方向阴影的偏移量

　　　　blur:阴影的模糊距离，值越大，越模糊

　　　　spread:阴影的尺寸

　　　　color:阴影的颜色

5、盒子模型

　　　　盒子模型---元素在页面上实际的占地空间的计算方式

　　　　浏览器默认的元素实际占地宽度：

　　　　左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

　　　　浏览器默认的元素实际占地高度：

　　　　上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

***外边距margin：单位有px和%，px：由于改变边框距的影响，直接位移多少像素的距离；%：位移的距离是父元素宽度的百分比；

margin的特殊取值有auto(自动计算块级元素的左右边距，使其块级元素在父级元素的范围内水平居中显示，ps：auto不能是块级元素垂直居中，只能设置水平居中只对块级元素有效)，padding(内边距)取值没有auto；

　　　　box-sizing：默认的是content-box,即设置的width(宽度)仅仅是元素内容的宽度，如取值设置为border-box,则设置宽度其实是元素内容区域的宽度+border-width+padding(左右内边距),固然高度也是同样的；

　　总结

块级元素	行内元素	行内块元素
设置宽高有效。若是不设置宽，宽度是父元素宽度的100%。若是不设置高，高度靠内容撑开	设置宽高无效。宽高靠内容撑开。	设置宽高有效。不设置，自带默认宽高，宽高都为0px。
独占一行	与其余行内元素/行内块共用一行	与其余行内元素/行内块共用一行
上下左右外边距有效但块级元素被另外一个块级元素所包裹时，被包裹的块级元素的margin值若是设置左右边距，那么该块级元素则只是水平移动，可是若是b置a上下边距，则该块级元素在上下移动时，其父元素也会跟着上下移动，可是不会左右移动，始终保持父子块级元素的上下相对位置不变；	上下外边距无效，左右外边距有效	上下左右外边距有效

2020-01-05