"""
浏览器 shell 内核
外表 内心 IE trident
Firefox Gecko
google chrome webkit/blink
safari webkit
opera presto css 权重
!important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符 !important Infinity 正无穷
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0 1000和100 256进制
一位工程师手测试出来的 浏览器父子选择器的内部原理是由右到左查找 设置字体大小实际上是设置字体的高
三角形用的是border设置 段落 text-indent: 2em;
1em = 1 * font-size 1.行级元素/内联标签 display:inline
feature:内容决定元素所占位置
不可以通过css改变宽高
span strong em a del 2.块级元素 display:block
feature:独占一行
可以通过css改变宽高
div p ul li ol form address 3.行级块元素 inline-block
feature:内容决定大小
可以改宽高
img 凡是带有inline的元素,都有文字特性 代码压缩,去掉了空格回车,所以img不能用margin调节间距 先定义功能(先写CSS)非常重要!
em可以自定义功能 a标签去掉下划线:text-decoration:none;
ui标签去掉圆点:list-style:none;
padding:0;
margin:0; 通配符用法
初始化标签
*{
padding:0;
margin:0;
text-decoration:none; ?
list-style:none; ?
} 盒子模型 盒子三大部分 盒子壁 border 内边距 padding 外边距 margin 盒子内容 width + height padding : 四个参数:上 右 下 左 三个参数:上 左右 下 两个参数:上下 左右 一个参数:全都有 body的margin 默认为8px position absolute
脱离原来位置进行定位
相当于最近的有定位的父级进行定位
如果没有,那么相对于文档进行定位
relative
保留原来位置进行定位
相当于自己本身原来的位置进行定位
fixed
固定定位
用relative作为位置,用absolute进行定位 居中:
html:
<div></div>
css:
div{ positoin:absolute/fixed; a..相对于文档中间 f..相对于浏览器中间
left:50%;
top:50%;
width:100px;
height:100px; margin-left:-50px;width * 0.5
margin-top:-50px;height * 0.5 } z-index:*; position 层的优先显示 border-radius:50% 可以把方块变成圆圈 浮动元素产生了浮动流 所有产生了浮动流的元素,块级元素看不到他们
产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素
利用伪元素让父级包裹住浮动元素 clear:both
必须是块级元素 伪元素必须加上content才能生效 原型继承圣杯模式: """

html css笔记 -度一的更多相关文章

  1. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  2. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  3. 一篇文章带你初步了解—CSS特指度

    CSS特指度 说明 这篇博客在在两台电脑上分别完成的,故而有些截图是Firefox,有些是Chrome,有些改动了浏览器的用户样式表,有些没改,但不会影响阅读,特此说明,勿怪. CSS选择器 单个CS ...

  4. 通用 CSS 笔记、建议与指导

    在参与规模庞大.历时漫长且人手众多的项目时,所有开发者遵守如下规则极为重要: + **保持 CSS 的可维护性** + **保持代码清晰易懂** + **保持代码的可拓展性** 为了实现这一目标,我们 ...

  5. html+css笔记

    文档结构 1.html文档结构 ①文档类型声明 严格型(标准模式):    <!DOCTYpE HTML>   HTML5 XHTML 1.0:<!DOCTYpE html pUbL ...

  6. 【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)

      第7章 CSS构造块   1.在样式表中添加注释 /*内容*/   2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...

  7. HTML+CSS笔记 CSS中级 一些小技巧

    水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...

  8. HTML+CSS笔记 CSS中级 颜色&长度值

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...

  9. HTML+CSS笔记 CSS中级 缩写入门

    盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...

随机推荐

  1. 【OpenJ_Bailian - 2192】Zipper(dfs)

    Zipper Descriptions: Given three strings, you are to determine whether the third string can be forme ...

  2. (矩阵快速幂)51NOD 1242斐波那契数列的第N项

    斐波那契数列的定义如下:   F(0) = 0 F(1) = 1 F(n) = F(n - 1) + F(n - 2) (n >= 2)   (1, 1, 2, 3, 5, 8, 13, 21, ...

  3. 报错Cannot determine embedded database driver class for database type NONE解决方法

    由于我不需要数据库,启动springboot报错: Cannot determine embedded database driver class for database type NONE If ...

  4. linux php5.6 提示 could not find driver

    1.进入在PHP源码包中进入ext/pdo_mysql # wget http://pecl.php.net/get/PDO_MYSQL-1.0.2.tgz 2.然后是解压缩. # tar -zxvf ...

  5. hihoOffer收割练习20题目1

    题目1 : 无根数变有根树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一棵包含 N 个节点的无根树,小Hi想知道如果指定其中某个节点 K 为根,那么每个节点的父 ...

  6. java中什么包不需要导入

    java中Math.random()*10;在math包中不需要导入: 即import java.lang.Math; 即lang下的所有包都不需要导入.

  7. Object C学习笔记18-SEL,@ selector,Class,@class--转

    一. SEL 类型 在上一篇介绍了几个方法,都只是介绍了其使用方式但是没有具体介绍参数: - (id)performSelector:(SEL)aSelector; - (id)performSele ...

  8. Coprime Conundrum 容斥原理

    https://www.hackerrank.com/contests/hourrank-13/challenges/arthur-and-coprimes 我们可以枚举每一个p在[2, sqrt(n ...

  9. Suricata的所有运行方式模式(图文详解)

    不多说,直接上干货! suricata的基本组成.Suricata是由所谓的线程(threads).线程模块 (thread-modules)和队列(queues)组成.Suricata是一个多线程的 ...

  10. 微信打开网址添加在浏览器中打开提示 http://caibaojian.com/weixin-tip.html

    原文链接:http://caibaojian.com/weixin-tip.html#t2 使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信已更新基 ...