一、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. MIT Graph实践概述

    MIT Graph实践概述 Features功能 •   iCloud Support •   Multi Local & Cloud Graphs •   Thread Safe •   S ...

  2. spring IOC DI AOP MVC 事务, mybatis 源码解读

    demo https://gitee.com/easybao/aop.git spring DI运行时序 AbstractApplicationContext类的 refresh()方法 1: pre ...

  3. Linkerd 2.10(Step by Step)—1. 将您的服务添加到 Linkerd

    为了让您的服务利用 Linkerd,它们还需要通过将 Linkerd 的数据平面代理(data plane proxy)注入到它们服务的 pod 中,从而进行网格化. Linkerd 2.10 中文手 ...

  4. Appium UI自动化测试

    #coding:utf-8 from appium import webdriver import time,traceback ''' desired_capabilities:这些键告诉appiu ...

  5. 工具篇：介绍几个好用的guava工具类

    前言 平时我们都会封装一些处理缓存或其他的小工具.但每个人都封装一次,重复造轮子,有点费时间.有没有一些好的工具库推荐-guava.guava是谷歌基于java封装好的开源库,它的性能.实用性,比我们 ...

  6. guavacache源码阅读笔记

    guavacache源码阅读笔记 官方文档: https://github.com/google/guava/wiki/CachesExplained 中文版: https://www.jianshu ...

  7. HR面试：过五关斩六将后，小心阴沟翻船！（史上最全、避坑宝典）

    文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...

  8. java中的关键字volatile

    1.volatile简介 volatile作为java中的关键词之一,用以声明变量的值可能随时会被别的线程修改,使用volatile修饰的变量会强制将修改的值立即写入主存,主存中值的更新会使缓存中的值 ...

  9. Spring Cloud Data Flow整合UAA使用外置数据库和API接口

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 前言 之前的文章<Spring Cloud Data Flow整合Cloudfoundry UAA服务做权限控制 ...

  10. 学习JDK源码（一）：String

    用了好久的Java了,从来没有看过jdk的源码,趁着今天有点时间,拿出了jdk的源码看了下,今天先看了关于String的,毕竟开发中String类型使用最广泛.在我们下载安装jdk的时候,部分源码也已 ...