html css笔记 -度一
"""
浏览器 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笔记 -度一的更多相关文章
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- 一篇文章带你初步了解—CSS特指度
CSS特指度 说明 这篇博客在在两台电脑上分别完成的,故而有些截图是Firefox,有些是Chrome,有些改动了浏览器的用户样式表,有些没改,但不会影响阅读,特此说明,勿怪. CSS选择器 单个CS ...
- 通用 CSS 笔记、建议与指导
在参与规模庞大.历时漫长且人手众多的项目时,所有开发者遵守如下规则极为重要: + **保持 CSS 的可维护性** + **保持代码清晰易懂** + **保持代码的可拓展性** 为了实现这一目标,我们 ...
- html+css笔记
文档结构 1.html文档结构 ①文档类型声明 严格型(标准模式): <!DOCTYpE HTML> HTML5 XHTML 1.0:<!DOCTYpE html pUbL ...
- 【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)
第7章 CSS构造块 1.在样式表中添加注释 /*内容*/ 2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...
- HTML+CSS笔记 CSS中级 一些小技巧
水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...
- HTML+CSS笔记 CSS中级 颜色&长度值
颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...
- HTML+CSS笔记 CSS中级 缩写入门
盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...
随机推荐
- 关于element-ui的diallog拖动的实现
先给下载地址 https://files.cnblogs.com/files/maruihua/el-dragDialog.rar 需要注意的是如果给模态框加入拖动指令,一些定位样式会出问题,需谨慎 ...
- ios手机Safari本地服务连不上
问题: 今天在本地起服务准备测下ios手机端页面,结果发现:页面可以打开,但是登录不上. 用alert定位了下,await fn() 报错被try()catch(){}捕获了... 原因: 该机子不支 ...
- 作为一个程序员,你了解 win 上有哪些必装的软件吗
关于 win 的一些基础必知内容之前已经分享过,没有看过的可以戳此处→Windows 使用之那些你还不知道操作 新系统安装的第一个软件 Google Chrome 毫无疑问,作为程序员应该是首选的浏览 ...
- [USACO 2012 Feb Gold] Cow Coupons【贪心 堆】
传送门1:http://www.usaco.org/index.php?page=viewproblem2&cpid=118 传送门2:http://www.lydsy.com/JudgeOn ...
- JetSpeed2部署至Apusic操作步骤记录
JetSpeed2部署至Apusic操作步骤记录. 1.创建Apusic新域,配置端口.管理端口和管理密码. 2.将Tomcat/lib目录中的所有jar包复制至Apusic域中的lib目录中(包括数 ...
- C#中实现C++中的友元类
最近做一个小程序,一个类A(负责显示处理)需要大量调用类B(负责数据处理)的函数,我最先想到的C++中的友元概念,因为类B中的这些函数并不希望public,它只是允许类A调用监测. 网上搜索了一下,没 ...
- sdut1282Find the Path (floyd变形)
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=1282 感觉这题就比较有意思了 ,虽说是看了别人 ...
- js 将XML字符串解析成XML文档 --- attribute construct error--- 空白字符与空格问题
最近在做xml在线编辑器,遇到一个字符串解析成xml文档的问题,记录一下. 原始xml内容读取自xml文档 <label class="test" id="labe ...
- Android 计算view 的高度
上午在做一个QuickAction里嵌套一个ListView,在Demo运行没事,结果引入到我的项目里,发现我先让它在Button上面,结果是无视那个Button的高度,这很明显,就是那个Button ...
- iOS----轻松掌握AFN网络顶级框架
AFN 一.什么是AFN 全称是AFNetworking,是对NSURLConnection的一层封装 虽然运行效率没有ASI高,但是使用比ASI简单 在iOS开发中,使用比较广泛 AFN的githu ...