一、CSS  盒模型

1．元素尺寸：CSS 盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小，样式表如下

//设置元素尺寸

div {

width: 200px;
height: 200px;
}
解释：设置元素的固定尺寸。
//限制元素尺寸
div {
min-width: 100px;
min-height: 100px;
max-width: 300px;
max-height: 300px;
}
解释：这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制它最大和最小的值。
//auto 自适应
div {
width: auto;
height: auto;
}
解释：auto 是默认值，width 在 auto 下是 100%的值；height 在 auto 下是自适应。
//百分比方式
#a {
background: silver;
width: 200px;
height: 200px;
}
#b {
background: gray;
width: 80%;
height: 80%;
}
<div id="a">
<div id="b">我是 html5</div>
</div>
解释：百分比就是相对于父元素长度来衡定的。

2．元素内边距：CSS 盒模型中可以设置元素内部边缘填充空白的大小，我们成为内边距。样式表如下：

3.元素外边距：CSS 盒模型中可以设置元素外部边缘填充空白的大小，我们成为外边距。样式表如下：

4．处理溢出：
当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右侧和底部。我们可以通过 overflow 系列样式来控制它。

5.元素可见性
使用 visibility 属性可以实现元素的可见性，这种样式一般可以配合 JavaScript来实现效果。样式表如下：

//设置元素隐藏，但占位

div {
visibility: hidden;
}
//隐藏表格的行或列，但不占位，Chrome 和 Opera 不支持
table tr:first-child {
visibility: collapse;
};

6.元素盒类型
CSS 盒模型中的 display 属性，可以更改元素本身盒类型。
主要有：1.块级元素（区块）；2 行内元素（内联）；3 行内-块级元素（内联块）；4.隐藏元素。

(1). 块级元素
所谓块级元素，就是能够设置元素尺寸、隔离其他元素功能的元素。比如：<div>、<p>等文档元素。

(2). 行内元素
所谓行内元素，不能够设置元素尺寸，它只能自适应内容、无法隔离其他元素，其它元素会紧跟其后。比如：<span>、<b>等文本元素。

(3). 行内- 块元素
所谓行内-块元素，可以设置元素尺寸，但无法隔离其他元素的元素。比如<img>。

7.元素的浮动
CSS 盒模型有一种叫浮动盒，就是通过 float 属性建立盒子的浮动方向，样式表如下

//实现联排效果
#a {
background: gray;
float: left;
}
#b {
background: maroon;
float: left;
}
#c {
background: navy;
float: left;
}

//实现元素右浮动

#c {

background: navy;
float: right;
}
//取消元素的浮动
#c {
background: navy;
float: none;
}

刚才的浮动有一个问题：当一个元素盒子被浮动后，下面的元素会自动堆叠处理，导致元素不可见或部分不可见。我们可以使用 clear 属性来处理。

二、CSS边框

border-width 长度值 设置边框的宽度，可选
border-style 样式名称 设置边框的样式，必选
border-color 颜色值 设置边框的颜色，可选

//配置完整的边框
div {
border-style: solid;
border-width: 2px;
border-color: red;
}

//简写形式四条边设置
div {
border: 2px solid red;
}

如果元素长和高均为 200px 时，四个边框均为 2 时，元素的长高总尺寸均为 202px。

圆角边框
CSS3 提供了一个非常实用的圆角边框的设置。使用 border-radius 属性，就可以达到这种效果，样式表如下：
border-radius 长度值或百分数 四条边角
border-top-left-radius 长度值或百分数 左上边角
border-top-right-radius 长度值或百分数 右上边角
border-bottom-left-radius 长度值或百分数 左下边角
border-bottom-right-radius 长度值或百分数 右下边角

 三、CSS背景

盒模型的尺寸可以通过两种方式实现可见性，一种就是之前的边框，还有一种就是背景。CSS 背景设置的样式表如下

background-color 颜色 背景的颜色
background-image none 或 url 背景的图片
background-repeat 样式名称 背景图片的样式
background-size 长度值或其他 背景图像的尺寸
background-position 位置坐标 背景图像的位置
background-attachment 滚动方式 背景图片的滚动
background-clip 裁剪方式 背景图片的裁剪
background-origin 位置坐标 背景图片起始点
background 复合值 背景图片简写方式

div {
background-color: silver;
}
解释：设置元素的背景颜色。属性值是颜色值。
div b {
background-color: transparent;
}
解释：默认值为 transparent，为透明的意思。这样<div>内部的元素就会继承<div>
的背景色。一般来说这个属性使用频率很低，原因是不需要改变色彩时就默认，需要改变色
彩时又是颜色值。
body {
background-color: silver;
}
解释：在<body>元素下可以设置整个页面的背景色。

body {
background-image: url(loading.gif);
}
解释：url 里面是图片的路径，设置整个页面以这个图片为背景，如果图片不足以覆盖，
则复制扩展。
div {
background-image: none;
}
解释：如果多个 div 批量设置了背景，而其中某一个不需要背景，可以单独设置 none
值取消背景。

body {
background-image: url(loading.gif);
background-repeat: no-repeat;
}
解释：让背景图片只显示一个，不平铺。CSS3 还提供了两个值，由于支持度不佳，这
里忽略。

body {
background-image: url(loading.gif);
background-repeat: no-repeat;
background-position: top;
}
解释：将背景图片置于页面上方，如果想置于左上方则值为：top left。
body {
background-image: url(loading.gif);
background-repeat: no-repeat;
background-position: 20px 20px;
}
解释：使用长度值或百分数，第一值表示左边，第二个值表示上边。

body {
background-image: url(loading.gif);
background-size: cover;
}
解释：使用 cover 相当于 100%，全屏铺面一张大图，这个值非常实用。在等比例放大
缩小的过程中，可能会有背景超出，当然，这点无伤大雅。
div {
background-image: url(loading.gif);
background-size: contain;
}
解释：使用 contain 表示，尽可能让图片完整的显示在元素内。
body {
background-image: url(loading.gif);
background-size: 240px 240px;
}
解释：长度值的用法，分别表示长和高。

body {
background-image: url(loading.gif);
background-attachment: fixed;
}
解释：fixed 属性会导致背景产生水印效果，拖动滚动条而背景不动。

div {
width: 400px;
height: 300px;
border: 10px dashed red;
padding: 50px;
background-image: url(img.png);
background-repeat: no-repeat;
background-origin: content-box;
}
解释：设置背景起始位置。

div {
width: 400px;
height: 300px;
border: 10px dashed red;
padding: 50px;
background-image: url(img.png);
background-repeat: no-repeat;
background-origin: border-box;
background-clip: padding-box;
}
解释：在内边距盒子内部裁剪背景。

div {
width: 400px;
height: 300px;
border: 10px dashed red;
padding: 50px;
background: silver url(img.png) no-repeat scroll left top/100%
border-box content-box;
}
解释：完整的简写顺序如下：
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position] / [ background-size]
[background-origin]
[background-clip];

HTML5-CSS(三)的更多相关文章

  1. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  2. CSS三种样式

    CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...

  3. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  4. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  5. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

  6. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  7. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

  8. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  9. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

  10. HTML5 & CSS初学者教程（详细、通俗易懂）

    前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现 ...

随机推荐

  1. 自定义 DataLoader

    自定义 DataLoader 如 数据输入 一文所介绍,OneFlow 支持两种数据加载方式:直接使用 NumPy 数据或者使用 DataLoader 及其相关算子. 在大型工业场景下,数据加载容易成 ...

  2. 3D惯导Lidar仿真

    3D惯导Lidar仿真 LiDAR-Inertial 3D Plane Simulator 摘要 提出了最*点*面表示的形式化方法,并分析了其在三维室内同步定位与映射中的应用.提出了一个利用最*点*面 ...

  3. Linux内存技术分析（下）

    Linux内存技术分析(下) 五.内存使用场景 out of memory 的时代过去了吗?no,内存再充足也不可任性使用. 1.内存的使用场景 page 管理 slab(kmalloc.内存池) 用 ...

  4. TinyML设备设计的Arm内核

    TinyML设备设计的Arm内核 Arm cores designed for TinyML devices Arm推出了两个新的IP核,旨在为终端设备.物联网设备和其低功耗.成本敏感的应用程序提供机 ...

  5. APP的闪退和无响应

    1.app闪退(crash,崩溃):程序异常退出不再运行 闪退的原因: a.程序内部逻辑错误(因算法或网络连接引起的异常,或是为捕捉到的错误) b.系统自身异常:一般自定ROM或刷机后比较常见 c.运 ...

  6. N沟通场效应管深度图解(1)工作原理及Multisim实例仿真

    场效应晶体管(Field Effect Transistor, FET)简称场效应管,是一种由多数载流子参与导电的半导体器件,也称为单极型晶体管,它主要分型场效应管(Junction FET, JFE ...

  7. external-attacher源码分析(1)-main方法与启动参数分析

    更多 ceph-csi 其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 摘要 ceph-csi分析-external-attacher源码分析.external- ...

  8. 《手把手教你》系列技巧篇（七）-java+ selenium自动化测试-宏哥带你全方位吊打Chrome启动过程（详细教程）

    1.简介 经过前边几篇文章和宏哥一起的学习,想必你已经知道了如何去查看Selenium相关接口或者方法.一般来说我们绝大多数看到的是已经封装好的接口,在查看接口源码的时候,你可以看到这个接口上边的注释 ...

  9. frp+nginx内网穿透

    frp+nginx内网穿透 背景:自己有台内网Linux主机,希望被外网访问(ssh.http.https): 准备工作 内网Linux主机-c,可以访问c主机和外网的主机-s(windows/lin ...

  10. .NET Core授权失败如何自定义响应信息？

    前言 在.NET 5之前,当授权失败即403时无法很友好的自定义错误信息,以致于比如利用Vue获取到的是空响应,不能很好的处理实际业务,同时涉及到权限粒度控制到控制器.Action,也不能很好的获取对 ...