CSS优先级和定位
overflow属性 hidden scroll auto
hidden 超出隐藏
scroll 滚动条
Auto 自动
display属性 block inline inline-block none
Block 块显示
inline 按行内显示
inline-block 双重作用。既有行的特点又有块的特点
在一行内显示,又具有宽高。
None
不显示。
Display:none;
CSS引入的方式 行内,内嵌,外部
行内
在标签内部,直接使用style=”CSS规则”
容易写错:<p style=”color=red;”>文字</p>
这个地方用冒号
内嵌
写在<head></head>中
写法
<style type=”text/css” >样式</style>
外部
通过link,将外部的样式表文件(*.css),引入当前页面。
写法:
<link type=”text/css” rel=”stylesheet” href=”*.css” />
Rel说明,当前文件与链接的文件是什么关系
Stylesheet 样式表的关系。
Href:指定样式表文件在什么地方(路径)
备注:我们在做网站时开发时,通常用的就是这种方式。
CSS优先级
当CSS冲突的时候
就近原则
行内样>内嵌样式>外部样式
行内样式>id>class>标签
//权重值,特性值
标签:1
类:10
ID:100
Style:1000
!important
CSS继承
和文本相关的一般都会继承。、
边框,宽,高,margin,padding 背景等都不继承。
继承的权重为0
定位属性:position:static fixed relative absolute
position: (配合着定位坐标
Left距左边, top距上边, right 距右边, bottom距底边
)
static 静态,不定位
fixed 固定, 脱离正常的文档流,比普通元素层级要高。相对于浏览器窗口进行定位。
relative
相对定位。相对于谁?(相对于自己,霸道的相对)
absolute
绝对定位,相对于最近的具有定位属性(不管是相对定位,或者绝对定位都可以)的元素进行定位。
脱离正常文档流,层级高于普通元素。
相对于它的祖先,有定位属性的祖先。
如果没有,相对于body定位。
备注:相对定位与绝对定位
外层元素通常设置相对定位,不用坐标。
内层元素设置绝对定位。配合着定位坐标。
定位坐标:
课堂练习:限时抢
盒子模型:边框线,内填充,外边距
border 边框线
padding 内填充
margin 外边距
top,right bottom left
总宽度:(margin-left+padding-left+border-left)*2+width(内容宽度)。
总宽度问题 加DTD(IE)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
外边距合并问题
margin,上下合并(大吃小),左右叠加
常见布局PPT
个人主页
绿色案例(作业)
浏览器兼容性简介
浏览器市场份额:http://tongji.baidu.com/data/browser
常用兼容性技巧
初始化清除浏览器默认值及HACK法:
初始化清除浏览器默认值:ul,li,body{margin:0;padding:0}
.box{
color:white;
background:blue; /*ff,7*/
background:red \9; /*ie6 7 8*/
*background:black; /*ie6 7*/
_background:orange;/*ie6*/
}
IE6 双边距 问题的处理
IE6 1px高度的DIV
如何实现?
制作网站的流程
有没有域名和空间?
开发网站类型,企业网站,电子商务,移动开发
功能模块选择:如:新闻系统,会员系统,商品展示,在线支付等
模板选择:色系选择
效果图
签订合同,首次支付30%
网站开发
内部测试,在线测试
客户测试
交付使用
支付余款
合同完成
服务年费
增加功能,加个论坛,微网站(再合同)
升级服务
CSS优先级和定位的更多相关文章
- css优先级机制
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style >(内部样式)Internal style sheet ...
- 前端css优先级以及继承
1.css优先级以及继承 css具有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 有一些属性是可以继承下来 : color . fo ...
- css优先级 中文版MDN补充翻译
原文地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity css的MDN中文版,这一页是讲css的优先级的. 读到文章的最后, ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- css选择器及css优先级
三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- css 优先级 机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...
- z-index、display、selector选择器优先级css优先级面试用到
z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...
- css优先级和层叠
css优先级和层叠 1.优先级 计算方法: a.行内样式 b.id选择器的数量 c.类,伪类和属性选择器的数量 d.标签选择器和伪元素选择 ...
随机推荐
- Git 初体验
第一次接触git的时候,一直在纳闷git和github的区别,解释下,git是版本管理工具,github是开源共享平台,个人这么理解,理解这么多就行了 先说git吧,下载git客户端,地址:http: ...
- Docker国内镜像源设置
编辑json文件,添加如下内容后重启docker即可. [root@Docker ~]# cat /etc/docker/daemon.json{ "registry-mirrors&quo ...
- Java路径类问题总结
一.获取路径: 单独的Java类中获得绝对路径根据java.io.File的Doc文挡,可知: 默认情况下new File("/")代表的目录为:System.getPropert ...
- 基于TODO的开发方法
之前买了一本书,叫<架构探险-从零开始写Java Web框架 >(不推荐购买-),一本标题党书籍!但是我很推崇作者写代码的方式,就是基于TODO的方式进行开发! 个人认为以基于TODO的方 ...
- 网络通信 --> IO多路复用之select、poll、epoll详解
IO多路复用之select.poll.epoll详解 目前支持I/O多路复用的系统调用有 select,pselect,poll,epoll,I/O多路复用就是通过一种机制,一个进程可以监视 ...
- linux --> 进程和线程
进程和线程 进程(process)和线程(thread)是操作系统的基本概念,下面用一个类比,来解释它们. 1. 计算机的核心是CPU,它承担了所有的计算任务.它就像一座工厂,时刻在运行. 2. 假定 ...
- 理解HDFS
综述 当数据集的大小超过一台独立的物理计算机的存储能力时,就有必要对它进行分区并存储到若干台单独的计算机上.HDFS是hadoop的主要分布式存储系统,一个HDFS集群主要包括NameNode用来管理 ...
- CSS2Properties doesn't have an indexed property setter for '0'
使用React时,发现chrome浏览器没事,firefox火狐浏览器报了一个CSS2Properties doesn't have an indexed property setter for '0 ...
- fcode-页面九宫格自动锁屏jquery插件
fcode.js 自动锁屏插件 fcode.js是什么? fcode.js是一款web页面九宫格自动锁屏js插件,依赖于jquery, 会在设置的范围里,判断用户有无操作,然后执行锁屏的功能. 就一个 ...
- 201621123040《Java程序设计》第3周学习总结
1.本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词,如类.对象.封装等 面向对象的思想 对象 类 1.2 用思维导图或者Onenote或其他工具将这些关键词组织起来. 掌握的还不够深 ...