css3基本属性
一、css属性:
1、层叠性:当出现相同的选择器时,属性冲突的时候,后面的属性会把前面的属性
覆盖掉。
2、继承:当存在父子关系的时候,子元素会继承父元素的部分属性
注意: a标签不会继承颜色;h标签不继承字体大小
3、优先级:当有多个选择器作用在同个元素上时,到底谁有效果?
优先级顺序:继承性 < 通配符 * < 标签选择器 < 类选择器 < id选择器 < 行内样
式 < ! important(影响的只是单一的属性)
4、权重计算:当有多个复合选择器作用在同一个元素上时哪个有效?
权重顺序确定方式:
1)确定选择器是否直接作用到目标选择器,若没有则是继承,继承的权重为0(是个
人都能干掉它)
2)确定是否有行内样式以及!important,若没有则权重最高。
3)数数
4)先数id,id多的权重最高
5)再数类,类多的那么权重高
6)最后数标签 ,如果标签多的那么权重高
7)当权重相同(相同的选择器)时,考虑后来者居上(层叠性)
5、行高:控制文本的垂直位置。
当文本没有设置高度时,行高就是容器的高度。
line-height:300px;
font :20px/300px "楷体"
font中有个隐藏属性:行高,且行高需要卸载font的前面,否则不能实现垂直方向上
的居中显示。
6、首行缩进:text-indent(一般用于隐藏不需要看到的文字,如logo)
7、常用属性:autofocus(自动获得焦点)
multiple(多文件上传)
autocomplete(需要添加“name”属性方可有效使用,控制表单是否有
自动完成属性,即自动记录文本框历史输入的值)
accesskey="k"(可利用快捷键获得焦点:alt+k即可定位到指定位置,
一般不常用)
二、选择器
1、结构(位置)伪类选择器 (冒号前面加上选择器不能加空格)
:first-child(选择第一个子元素)
:last-child(选择最后一个子元素)
:nth-child(n)(选择第n个子元素)
2、目标选择器:被选中目标的样式控制(:target 即可,不需要在冒号前面加上a)
:target {
background-color: red;
}
<a href="#one">第一句</a>
<a href="#two">第二句</a>
<p id="one">这是一个寂寞的天</p>
<p id="two">下着有些伤心的雨</p>
3、图片水平方向上对齐使用的是 vertical-align: middle;
4、属性选择器:
1)通过属性名和属性值来控制元素:
eg. li[type="pinnk"] {
color:pink;
}
2)通过属性名来控制元素:
eg.li[type] {
background:#fff;
}
<ul>
<li type="pink">3</li>
<li type="">3</li>
</ul>
5、伪元素选择器
div::first-letter {控制第一个字}
div::first-line {控制第一行文本}
div::selection {控制被选中文本}
6、before与after伪元素
使用该伪元素时必须要有“content”关键字
div::before/after{ 当你无法改变html结构代码又必须添加元素时就要使用该伪类
元素}
7、块级元素:block:
1)一行显示一个,独自占据一行
2)可以设置宽高
3)若是不写宽度,则默认宽度就等于父盒子的宽度。
4)有自己的宽度后,使用margin:0 auto;可实现盒子水平居中自适应。
h,div,p,ul,ol,li
8、行内元素 :inline:
1)一行可以显示多个
2)没有办法设置有效宽高,由内容决定
a span
9、行内块元素:inline-block:
1)一行可以显示多个
2)可以设置有效的宽高
img input
三、边框属性
1、边框合并属性: border-collapse: collapse;
2、边距问题:
1)padding:内容到边框的距离
2)margin:盒子与盒子之间的距离
3)margin垂直塌陷:两个垂直排布的盒子,分别设置了相应的margin,距离
不会相加,而是取两者之间的最大值
4)margin包含塌陷:存在父子关系的盒子,若给子盒子添加一个margin-
top,只有margin-top会把父盒子带跑(解决方式BFC:overflow:hidden;
块级格式化上下文,让内部布局不影响外部)
注意:位置使用规则:宽高能解决的不用padding,padding能解决的不用margin
3、margin的共享问题:
两个盒子并排显示,给其中一个盒子设置margin-top,剩下的盒子也会拥有margin-
top的值。
4、行内元素(a/span)的特殊性:添加垂直方向上的padding和margin是无效的。
四、盒模型
1、盒子的真实宽高(浏览器运行之后的结果)计算:
设置的宽高 + border + padding
2、盒模型:
1)外扩模型 box-sizing:content-box(盒子大小为: width + border + padding)默
认符合w3c标准。
2)内减模型 box-sizing:border-box(盒子大小为: width)即border和padding包含
在width中的,border和padding会去压缩内容的空间。
五、浮动
1、初始化代码
* {
margin: 0;
padding: 0;
/*清除默认的内外边距*/
}
a {
text-decoration: none;
color: #000;
/*清除a标签的下划线,以及修改默认颜色*/
}
input {
border: 0 none;
/*清除边框*/
outline: 0 none;
/*清除外轮廓线*/
}
body {
background-color: #ccc;
font: 12px/100% "微软雅黑";
/*行高如果用百分比设置:等于字体大小乘以这个百分比*/
}
1、浮动的初始目的:解决文字环绕图片布局。现在的目的:用于定位
2、浮动的特点:
1)实现模式转换:行内、块级元素可以使用浮动,且盒子与盒子之间没有间隔
2)脱离标准流且不会占据标准流的位置,即浮动起来后原来的位置会被后来者居上
。
3)浮动元素是依次排列的,只跟结构代码的顺序有关。
4)浮动元素顶端对齐
5)当父元素浮动子元素不浮动的时候,会把子元素带跑
6)父子都浮动时子元素的浮动范围就是父元素所在的范围(即不会跑出去)
7)浮动元素前面如果有标准流,那么它只会在原来的位置浮动
3、行内元素的浮动
浮动的元素已经发生模式转换,相当于行内块级元素,所以设置margin-top才有效果
。
css3基本属性的更多相关文章
- CSS3 基本属性 浅析(含选择器、背景阴影、3D转换、动画等)
1渐进增强原则 2私有前缀 不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试: Chrome浏览器:-webkit-border-radius: 5px; ...
- css3 animate基本属性
Css3animate属性 属性 描述 Css Animation 所有动画属性的简写属性,除了animation-play-state属性 Animation:name duration timin ...
- CSS3制作动画的三个属性
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...
- CSS3背景温故
1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- CSS3的新属性的一下总结
阮一峰:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 由于自己经常搞混:animation,tran ...
- CSS3动画基本的转换和过渡
理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...
- CSS3边框温故
1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...
- 制作动画效果:《CSS3 Animation》
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...
随机推荐
- 抽奖大转盘 js代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- /Date(1555554794000)/ 转换为日期格式
/Date(1555554794000)/ 转换为 2019/4/18 new Date(parseInt('/Date(1555554794000)/'.substr(6, 13))).toLoca ...
- 本机Jenkins的使用
1.启动jenkins: 命令:java -jar D:\toolspackage\jenkins\jenkins.war 打开jenkins网页:http://localhost:8080/ 2. ...
- Python中布尔值是False的所有值
在python中以下都是False:为0的,空集合,空字符串,空值None >>> bool(0) False >>> bool(-0) False >> ...
- 第四十六篇--解析和保存xml文件
新建assets资源文件夹,右键app --> new --> Folder --> Assets Folder,将info.xml放入此文件夹下面. info.xml <?x ...
- Spring Security 登录校验 源码解析
传统情况下,在过滤器中做权限验证,Spring Secuirty也是在Filter中进行权限验证. 创建并注册过滤器 package com.awizdata.edubank.config; impo ...
- Exp6 信息收集与漏洞扫描
一.实践过程 1.信息收集 1.1 通过DNS和IP查询目标网站的信息 (1)whois命令用来进行域名注册信息查询,可查询到3R注册信息,包括注册人的姓名.组织和城市等信息. whois baidu ...
- PLSQL Developer安装与配置
前言 PLSQL Developer软件以及需要的配置 链接:https://pan.baidu.com/s/1xHdAl1RAgtQb-oDHPah19w 密码:x41k 1 安装 解压这两个压缩包 ...
- 目前的.NET 主流的后端ORM框架
转自:https://www.cnblogs.com/yeminglong/p/9518438.html 推荐一些常用的asp.net ORM框架 SqlSugar (国内) Dos.ORM (国内 ...
- MySql存储过程 CURSOR循环
游标 游标(Cursor)是处理数据的一种方法,为了查看或者处理结果集中的数据,游标提供了在结果集中一次一行或者多行前进或向后浏览数据的能力. 使用步骤 声明一个游标: declare 游标名称 CU ...