前端开发之CSS篇二
主要内容：
1️⃣ CSS的继承性和层叠性
1、继承：给父级设置一些属性，子级继承了父级的该属性，这就是css中的继承。
有一些属性是可以继承下来的：如color、font-*、text-*、line-*文本元素，而像一些盒子元素，定位的元素（浮动、绝对定位、固定定位）不能继承。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css继承性</title>
<style type="text/css">
.father{
color: #6f42c1;
font-size: 18px;
background-color: #5bc0de;
}
.son{
color: #1c7430;
font-size: 30px;
}
</style>
</head>
<body>
<div class="father" id="cc">
<div class="son">
<p>你好，明天！</p>
</div>
<p>我是一个孤独的段落</p>
</div> </body>
</html>
2、层叠性
我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果
我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？
也就是不同的选择器它们的优先级是怎样的呢？
是先来后到呢还是后来居上呢？统统不是，它是按照下面的选择器的权重规则来决定的。
敲黑板，划重点了！！！
CSS选择器优先级
内联样式的权重为 1000
id选择器的权重为 100
类选择器的权重为 10
元素选择器的权重为 1
权重计算永不进位
简而言之就是：内联样式的优先级最高，其次是id选择器，接着是类选择器，最后是标签选择器。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css继承性</title>
<style type="text/css"> /* 第一种情况 --- 非继承（直接选中） */
/*** 1.1 直接选中时（非继承）时比较方法，分权重不同时和相同时***/
/*选择器 数目 选择器 数目 选择器 数目 权重合计*/
/* ID 2 类 0 标签 1 权重201*/
#box1 #box2 p{
color:green;
font-size: 10px;
}
/*ID 1 类 1 标签 0 权重110*/
#box2 .wrap3{
color:royalblue;
font-size: 15px;
}
/*ID 1 类 0 标签 3 权重103*/
div div #box3 p{
color:pink;
font-size: 20px;
}
/*ID 0 类 3 标签 4 权重034*/
div .wrap1 div .wrap2 div .wrap3 {
color:blueviolet;
font-size: 30px;
} /* 1.2 当两者的权重相同时，后者覆盖前者，只显示后者的样式*/
/*ID 1 类 1 标签 1 权重111*/
#box1 .wrap2 p{
color:red;
}
/*ID 1 类 1 标签 1 权重111*/
#box2 .wrap3 p{
color:gold;
} /* 第二种情况----继承 */
/***当两个均为继承时的比较方法，权重直接为0，此时遵循“就近原则”（谁描述得更接近属性，就显示谁的属性）***/
/*以下两个实际权重均为0，所以遵循“就近原则”，#box1 .wrap2 .wrap3更接近被描述的元素，所以发挥作用*/
#box1 #box2 {
color:blue;
}
/*ID 1 类 2 标签 0 此时为继承，所示实际权重为0 */
#box1 .wrap2 .wrap3 {
color:palegreen;
}
.spe1{
color:royalblue;
}
.spe2{
color:lightpink !important;
} ul{
font-size: 30px !important;
}
li{
font-size: 10px;
color:burlywood;
} </style>
</head>
<body>
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>我是一只小小鸟</p>
</div>
</div> <div>
<!--以下两句效果完全相同，说明类名顺序无关-->
<p class="spe1 spe2">我是小小段落1</p>
<p class="spe2 spe1">我是小小段落2</p>
</div>
<div class="list">
<!--!import 对继承无效-->
<ul>
<li>我是无序的list</li>
</ul>
</div>
</div>
</body>
</html>
总结：
① 当添加css样式的元素，是被直接选中（紧贴添加css样式的那个元素）时，就数数（依次统计
id选择器，class选择器和标签选择器的数目），其中id选择器的权重最大（100/个），其次是class选择
器（10/个），最后是标签选择器（1/个），谁的权重大就显示谁的属性；权重一样大时，后来者居上。
② 当添加css样式的元素，是被继承（非直接选中）时，此时权重不起作用，均为0，此时，
按照“就近原则”，遵循谁描述得接近元素，就显示谁的属性；当都描述的一样近时，又开始计算
权重（计算方法同①），谁大就显示谁。
注意：
还有一种不讲道理的!import方式来强制让样式生效,但不影响继承来的权重，而只对直接选中的
情况有影响，但是不推荐使用。因为大量使用!import的代码是无法维护的。
2️⃣ 盒模型 1、何谓盒模型？
在网页中基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型。
2、盒模型重要的属性
重要的属性：width,height,padding,border,margin
width:指的是内容的宽度，而不是整个盒子真实的宽度
height：指的是内容的高度，而不是整个盒子的真实的高度。
3、盒模型的计算方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
/* 影响盒模型的几个元素：width、height、padding、border,由此盒模型的计算有以下几种方式：*/
/*比如做一个402px*402px的盒子*/
/*盒模型计算方式一*/
/*div{*/
/*width:400px;*/
/*height:400px;*/
/*padding: 0px;*/
/*border: 1px solid yellow;*/
/*}*/
/*盒模型计算方式二*/
/*div{*/
/*width: 200px;*/
/*height: 200px;*/
/*padding: 100px;*/
/*border: 1px solid blue;*/
/*}*/
/*盒模型计算方式三*/
div{
width: 0px;
height: 0px;
padding: 200px;
border: 1px solid gold;
}
/*要保证盒子的真实宽度，加width时就应该减padding，减width时就应该加padding，
注意，padding指的是上右下左四个方向上的内间距，因此padding数值的改变会同时影响width和height的数值。*/
</style>
</head>
<body>
<div>
这是一个盒模型
</div>
</body>
</html>
3️⃣ padding属性
1、何谓padding属性？
就是内边距，padding的区域是有背景颜色的，并且背景颜色和内容区颜色一样，
也就是说background-color这个属性将填充所有的border以内的区域。 就是边框到内容之间的距离。 padding有四个方向，所以我们能描述4个方向的padding。
方法有两种：1、写小属性 2、写综合属性，用空格隔开
2、如何设置padding的属性？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css"> div{
width: 200px;
height: 200px;
/* ---- 第一种最简单的设置方法：上右下左的内边距设置为相同的数值------------- */
/* padding: 20px; */
background-color: #5bc0de;
border: 5px solid yellowgreen; /*-------- 第二种设置方法：单独设置，上下左右每一个内边距的属性的值 ------------- */
/*padding小属性设置方法*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 20px;*/
/*padding-left: 20px;*/
/*---------第三种设置方法：综合设置，按照上右下左的设置顺序，依次设置相关值（推荐）-------------*/
/*padding综合属性设置方法*/
/*设置四个值时：上 右 下 左（顺时针方向）*/
/*padding: 20px 30px 10px 30px;*/ /*设置三个值时：上 左右 下 */
/*padding: 20px 40px 10px;*/ /*设置两个值时：上下 左右 */
/*padding: 20px 50px;*/ /*设置一个值时*/
/*padding: 20px; 等同于padding: 20px 20px 20px 20px;*/ } /*做站的时候，要清除默认的样式（padding,margin等）*/
/*通用选择器效率较低，建议使用并集选择器将页面应用的标签全部初始化*/
*｛
margin:0;
padding:0;
｝
</style>
</head>
<body>
<div>
padding属性
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
4️⃣ border属性
1、何谓border属性？
即边框，边框三要素：粗细（粗细不写不显示），线性（只写线性样式时，默认有上下左右3px的宽度，solid默认是黑色），颜色（如果颜色不写，默认是黑色的）
对于边框属性的描述，可按照粗细、线性和颜色三要素来写，也可按照上右下左。
2、border属性的设置方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小练习</title>
<style type="text/css">
div{
/*width: 300px;*/
/*height: 300px;*/
/*border: 5px solid blue; <!--边框三要素：粗细（粗细不写不显示）、线性（只写线性样式，默认有上下左右3px的宽度，
solid默认是黑色）、颜色（如果颜色不写，默认是黑色的）-->*/ /*------------ 方式1：按照三要素来写：-------------------*/
/*border-width: 5px;*/ /*<!--依次对应“上右下左”四个方向（按顺时针顺序）-->*/
/*border-style: solid dashed double dotted;*/
/*也可用三个表示，即“上 左右 下”*/
/*border-style: dotted solid double;*/
/*也可用两个表示，即“上下 左右 ”*/
/*border-style: dotted solid;*/ /*<!--依次对应“上右下左”四个方向（按顺时针顺序）-->*/
/*border-color:red green blue yellowgreen;*/
/*也可用三个表示，即“上 左右 下”*/
/*border-color: olive red blueviolet;*/
/*也可用两个表示，即“上下 左右 ”*/
/*border-color: blueviolet yellowgreen;*/ /*------------- 方式2：按照方向来写 ---------------------------*/
/*以左右边距为例演示，其余设置类似*/
/*border-top-width: 10px;*/
/*border-right-width: 3px;*/
/*border-bottom-width: 20px;*/
/*border-left-width: 5px;*/ /*取消设置的属性*/
/*border:none;*/
border-top:none;
</style>
</head> <body>
<div>
<!--<p>我是一个大大边框</p>-->
</div>
</body>
</html>
3、小练习
（1）利用width、height和boder属性画一个正三角形出来。
（2） 利用width、height和boder属性画一个方向向右的正三角形出来。
练习1参考答案：
<style>
width:0;
height: 0;
border-right: 30px solid transparent;
border-bottom: 30px solid rebeccapurple;
border-left: 30px solid transparent;
</style>
练习2参考答案：
<style>
width:0;
height: 0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left: 50px solid dodgerblue;
</style> /*总结：方向向朝哪边，哪边就缺省，相对方向取任一颜色，其余方向选择transparent（透明）*/
5️⃣ margin属性
1、何谓margin属性？
指的是外边距，即距离，是盒子边框外边缘与浏览器页面边缘的距离。
注意：margin属性未设置时，默认网页与浏览器页面边缘有8px的间距，当设置margin属性的值后，除了上边缘原来的8px会塌入到设置的值中外,右下左方向都会会加上默认的8px,也就是说，如果不初始化网页页面，页面另外三边的外边距会比上方多8px。（这是个坑，一定要注意）
2、margin属性的设置方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin属性</title>
<style type="text/css">
/*使用“*通用选择器”对页面内边距和外边距进行初始化*/
*{
padding:0;
margin: 0;
}
div{
width:300px;
height: 300px;
background-color:blueviolet;
border: 5px solid #b1dfbb;
/*------- 方法1：上右下左的外边距设置为相同的数值 -------*/
/*margin: 30px;*/ /*------- 方法2：上右下左的外边距单独设置为不同的数值 -------*/
margin-top:30px;
margin-right: 15px;
margin-left: 10px;
margin-bottom:200px;
}
p{
border: 2px solid greenyellow;
} </style>
</head>
<body>
<div>
测试margin属性
</div>
<p>盒子之外</p>
</body>
</html>
6️⃣ 标准文档流
1、什么是标准文档流？
宏观来讲，我们的web页面和ps等设计软件有本质的不同。
web网页的制作是个“流”，从上而下，像“织毛衣”，
而设计软件，想在哪里画，就在哪里画。
2、标准文档流
（1）空白折叠现象（文字间多个空格仍然只会显示一个空格，代码换行也会显示一个空格）。
（2）高矮不齐，底边对齐（例如文字的大小即使不同，但它们的底边是对齐的）。
（3）自动换行，一行写不下，就换行。
3、示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin属性</title>
<style type="text/css">
span{
font-size: 50px;
color:cornflowerblue;
}
</style>
</head>
<body>
<div>
文档文档 文档文档<span>文档</span>文档文档文档文档文档文档
文档文档文档文档文档文档
<img src="fav.ico" alt=""><img src="fav.ico" alt=""><img src="fav.ico" alt="">
<img src="fav.ico" alt="">
<img src="fav.ico" alt="">
</div>
</body>
</html>
7️⃣ 行内元素和块状元素转换
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
1、常用的块状元素（display:block;）
<div></div> 、<p></p>、<h1> -- <h6> 、<ol></ol>、<ul></ul>、<table></table>、<form></form> 、<li></li>
特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
2、常用的行内元素（display:inline;）
<a></a>、<span></span>、<br>、<i>、<em>、<strong>、<label></label>
特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
3、常用的行内块状元素（display:inline-block;）
<img> 、<input>
特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
4、通过display属性对块级元素、行内元素、行内块元素进行转换
（1）display属性
1、控制HTML元素的显示和隐藏
2、块级元素与行内元素的转换
（2）display属性的值：
block（块级元素）
默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 inline（行内）
行内元素
只要设置了display: inline，那么元素的width、height、margin-top、margin-bottom和 float属性都不会有什么影响。 inline-block（行内块级）
行内块元素
同时具有行内元素和块级元素的特点。 none
HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
（3）示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块状元素与行内元素的转换</title>
<style type="text/css">
.box1{
/*将块状元素转换为行内元素*/
display: inline;
width: 300px;
height: 30px;
border: 1px solid cornflowerblue;
}
.box2{
/*将块状元素转换为行内块状元素*/
display: inline-block;
width: 200px;
height: 80px;
border: 1px solid rosybrown;
background-color: #5bc0de;
}
span{
/*将行内元素转换为块状元素*/
display: block;
background-color: #b1dfbb;
width: 100px;
height: 30px;
/*隐藏当前的标签 不会占据当前位置*/
/*display: none; */
/* 隐藏当前的标签 仍会占用当前位置*/
visibility: hidden; }
img{
width: 300px;
height: 300px;
/*隐藏当前的标签*/
/*display: none;*/
}
</style>
</head>
<body>
<div class="box1">块状元素1</div>
<div class="box1">块状元素2</div>
<div class="box2">块状元素3</div>
<span>congcong</span>
<span>congcong</span>
<img src="fav.ico">
<img src="fav.ico">
</body>
</html>
前端开发之CSS篇二的更多相关文章
- 前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...
- 前端开发之CSS篇四
一.相对定位 二.绝对定位 三.固定定位 四.z-index 前言 定位有三种:1.相对定位 2.绝对定位 3.固定定位 这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣ 相对定位 1.三 ...
- 前端开发之CSS篇三
主要内容: 一.CSS布局之浮动 二.清除浮动带来的问题 三.margin塌陷问题和水平居中 四.善用父级的的padding取代子级的margin 五.文本属性和字体 ...
- 前端开发之HTML篇二
主要内容: 一.表格标签 -- table 二.表单标签 -- form 三.常用标签属性和分类 四.标签嵌套规则 1️⃣ 表格标签 -- table 表格由<table> 标签来定义. ...
- 前端开发之CSS入门篇
一.CSS介绍和语法 二.CSS引入方式 三.基本选择器 四.高级选择器 五.伪类选择器 六.伪元素选择器 1️⃣ CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就 ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- 前端开发之HTML篇一
主要内容: 一.HTML简介 二.HTML标签 三.HTML文档结构和注释 四.head标签及相关内容 五.body标签及相关内容 1️⃣ HTM ...
- 前端开发之html篇
一.什么是html? 1.我们说socket网络编程的时候,提到过一个cs模型,就是客户端—服务端模型,前端开发也是基于网络编程,但是这时就应该是bs模型了,是浏览器与服务端的通信. 我们可以模拟一个 ...
- 前端开发之jQuery篇--选择器
主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换 一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...
随机推荐
- [CF895E]Eyes Closed
luogu description 一个序列\(a_i\),支持一下两种操作. \(1\ \ l_1\ \ r_1\ \ l_2\ \ r_2\): 随机交换区间\([l_1,r_1]\)和\([l_ ...
- Mysql-Proxy 读写分离的各种坑，特别是复制延迟时
延迟问题读写分离不能回避的问题之一就是延迟,可以考虑Google提供的SemiSyncReplicationDesign补丁. 端口问题MySQL-Proxy缺省使用的是4040端口,如果你想透明的把 ...
- homeland 开源论坛系统搭建试用
备注: 需要使用docker docker-compose 1. clone 代码 git clone https://github.com/ruby-china/homeland-docker. ...
- FastAdmin 无刷新地址改变
FastAdmin 无刷新地址改变 群里有人问 FastAdmin 是不是用了 pjax? 之前有看到 Karson 回复过,其实 FastAdmin 用的是 HTML5 的一个History API ...
- Ipython notebook 一些技巧
在模块后面输入:?,运行可以显示说明: 输入:??,运行可以显示源代码. 输入%matplotlib inline将matplotlib库导入,要显示的图片就可以嵌入到网页中了 %prun用于代码的执 ...
- 解决asp.net上传文件时文件太大导致的错误
即使在web.config中添加了节点和设置依然是不行的,还是报文件太大的错误, <httpModules> <add name="UploadHttpModu ...
- laravel的model例子
5里面直接artisan建立model ./artisan make:model MyModel 找到MyModel,改成下面这样 <?php namespace App; use Illumi ...
- 小峰Hibernate简介与HelloWorld
一.Hibernate简介: 二.Hibernate4 版Hello World 实现 工程结构: com.cy.model.Student: package com.cy.model; public ...
- 【转】用Jmeter制造测试数据
在平时的测试过程中,肯定会有碰到需要一批大量的数据的情况,如果这些数据本身没有太多的要求,或者说需求比较简单,可以通过简单的参数化实现的,推荐用Jmeter来造数据. 限制: Jmeter只能支持ja ...
- MySQL添加数据库的唯一索引的几种方式~
创建表时直接设置: DROP TABLE IF EXISTS `student`;CREATE TABLE `student` ( `stu_id` int(11) NOT NULL AUTO_IN ...