学编程,来源栈;先学习,再交钱
当前系列: HTML和CSS 修改讲义

CSS把认为所有的元素都是一个方方正正的“盒子(box)”。

所以每个盒子,都可以设置:


边框(border)

包括边框的粗细(width)、样式(style)和颜色(color)

    border-width: 5px; /*粗细为5px*/
    border-style: dashed; /*样式为虚线*/
    border-color: red;

一样可以合并简写:

    border: 5px dashed red; /*不限顺序*/
    border: 5px dashed;     /*只有颜色可以省略*/

还可以指定上左下右(top/right/bottom/left)四边中的一个或若干个border(演示:引用效果)

而且四边边框还可以不同,可以分别指定:

    border-top: 1px dashed;
    border-right:none;
    border-bottom:5px solid;
    border-left:3px dotted blue;

圆角

曾经,这是一个非常麻烦的问题。但CSS3引入了一个简单的语法
border-radius: 10px;

10px指的就是“圆角的半径”(PPT演示)

@想一想@:怎么做出一个圆?

三角形

演示效果:关键字上悬浮

实际上是由border生成的。先看一下四个border是如何组合的:

div {
    border-top: 5px solid blue;
    border-left:5px solid red;
    border-right: 5px solid yellow;
    border-bottom: 5px solid green;
}

如何只留下一个三角形呢?把其他三个border去掉就可以了。

但是,注意:如果其他三个border的样式完全不声明,是不能形成这种效果的。怎么办呢?将其颜色设置成透明(tansparent)即可:

border-right: 5px solid transparent;

关于表格

最后,有一些元素是设置了border的。

比如要实现这样的表格效果:

因为一个tr代表一行,所以你可能想用这样的样式:

tr{
    border: 1px solid;
}
但这是不行的(演示),正确的方法是:
table{
    border-collapse: collapse;
}
th, td{
    border-top: 1px solid;
    border-bottom: 1px solid;
}


display

前面讲div和span的时候说过,HTML元素默认有“块”和“流”两种特性——这其实是可以在CSS中修改的。通过设置display的值等于:
  • block:将元素设置为“块”格式
  • inline:将元素设置为“流”格式

PS:CSS3中还添加了其他一些display的选项,比如:inline-block,table-*等,但并非所有浏览器都予以支持,此处略过。

隐藏和显示

此外,display:none,还可以让元素不显示。

这里注意它和color:transparent以及visibility:hidden的区别:

visibility:hidden;  /*不可见,但还是会占着位置*/
display:none;     /*不显示,也不会占着位置*/

宽/高(width/height)

可以用px/em等绝对单位,也可以用(父元素声明宽/高度)百分比表示:

    width: 33%; 
    height: 200px;

overflow溢出

设定了元素宽高,当元素中内容(文本或其他元素)的宽高大于父元素时,如何处理?可以设置

其常用可选项为:

  • auto:由浏览器自行决定,有可能将父元素撑大
  • hidden:父元素大小始终不变,超出其范围的元素被隐藏掉
  • scroll:生成滚动条

此外还可以用overflow-x和overflow-y更精确的设置横向(x)和纵向(y)处置情形。

max和min

从CSS3开始,还可以声明最大(max)宽/高度和最小(min)宽/高度,即当盒子中的内容不足/超出指定高/宽度时,绷起盒子或折叠内容。

div{
    border: 1px solid;
    max-height: 300px;
    min-width: 500px;
    float: left;
}
注意:快捷元素默认宽度为全屏宽,所以min-width需要在元素浮动(后文详述)后才能生效。


inline

元素(样式)的上设置width和height无效。

但可设置 line-height。把line-height设置得和父元素一样高时,可以让流元素垂直居中(当然也可以偏上偏下调节):

    <div style="height:100px;">
        <span style="line-height:100px;" >大神小班,全程直播</span>
    </div>
PS:inline-block,和inline的区别就是允许在元素上设置宽度和高度。


内边距(padding)

设置盒子(边框)和内部内容之间的距离。

    padding-top: 10px;
    padding-bottom: 30%;    /*当前元素高度为基数*/
    padding-left: 5em;
    padding-right: 10%;     /*当前元素宽度为基数*/

也可以合并简写:

    padding: 10px 10% 30% 5em;  /*顺序为上右下左顺时针*/
    padding: 10px 10%;          /*上下相同为10px,左右相同为10%*/
    padding: 10px;              /*上下左右全部为10px*/
    padding: 10px 20px 10% ;    /*上下各为10px和10%,左右同为20px*/

流元素的padding

会影响(挪动)左右相邻元素,但不会影响上下元素

(*/ω\*),直接演示吧:

span{
    border: 1px solid;
    padding: 10px;
}
<span>源栈欢迎您</span><br />
<span>源栈欢迎您</span>


box-sizing

border和padding会撑开盒子大小。

用两个div进行对比演示:

<div id="has-border">一起帮·源栈欢迎您</div>
<div id="no-border"> 助力职业自由</div>

设置相同的宽度,不同的背景色:

#has-border {
    /* box-sizing: border-box; */
    /* border-right: 20px solid; */
    /* padding-right: 20px; */
    background-color: burlywood;
}

#no-border {
    background-color: antiquewhite;
}

div {
    width: 500px;
}

这在实际开发中会带来很多麻烦!

所以CSS 3引入了box-sizing设置,如果其值为border-box,盒子的尺寸(宽高)由width和height决定之后,padding和border不能再将其撑开,或者可以理解成:padding和border包含在width和height之中。


外边距(margin)

设置盒子和盒子之间的距离。

    <h1 style="margin-bottom:20px;">源栈欢迎您!</h1>
    <span style="margin-right:20px;">大神小班</span><span style="margin-left:20px;">全程直播</span>
margin的用法和padding类似,一样可以上下左右四个边分别设置,或者合并简写。同样的,流元素无法设定上下margin。

边界折叠(margin collapsing)

当一个元素的margin-top和它上面元素的margin-bottom同时都有设定时,只会保留最大边距,这就是边界折叠:
    <main>
        <p>大神小班</p>
        <p>全程直播</p>
        <p>按周计费</p>
        <p>拎包入住</p>
    </main>
    p {
        margin: 20px;
    }
你会发现所有p标签被均匀的分布,没有出现第一段和第二段之间间距 20+20=40px 的情形。边界折叠的设计初衷就是这个,然而,却造成了更多的麻烦……

PS:更复杂的更完整的情形可以参考MDN

水平居中

使用margin可以实现元素的水平居中:
    main {
        background-color: aqua; /*便于观察*/
        width: 500px;           /*要设定一个宽度,否则默认100%的宽度无水平居中的意义*/
        margin-left: auto;
        margin-right: auto;
    }


统一清零

各个浏览器给不同HTML元素默认设置了不同的margin和padding,非常麻烦!为了避免这种浏览器兼容问题,我们通常都首先直接定义:

    * {
        margin: 0;
        padding: 0;
    }

另外,调试的时候,我喜欢这样给所有元素都添加一个边框来看一看:

        * {
            border: 1px solid;
        }
学习笔记
源栈学历
键盘敲烂,月薪过万作业不做,等于没学

作业

觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 HTML和CSS 中继续学习:

多快好省!前端后端,线上线下,名师精讲

  • 先学习,后付费;
  • 不满意,不要钱。
  • 编程培训班,我就选源栈

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码