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%

网站开发

内部测试,在线测试

客户测试

交付使用

支付余款

合同完成

服务年费

增加功能,加个论坛,微网站(再合同)

升级服务

原文地址:https://www.cnblogs.com/Mangosy/p/8799150.html

时间: 2024-12-19 03:18:31

CSS优先级和定位的相关文章

css优先级机制

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style  >(内部样式)Internal style sheet >(外部样式)External style sheet (有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式.) 2.CSS选择器优先级:id选择器优先级 > 类class选择器优先级 > 标签选择器优先级 1.文内的样式优先级为1,0,0,0,所以始终高于外部定义.

26.前端css优先级以及继承

1.css优先级以及继承 css具有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 有一些属性是可以继承下来 : color . font-*. text-*.line-* .主要是文本级的标签元素. 但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承. 层叠性 层叠性: 权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了权重: 谁的权重大,浏览器就会显示谁的属性 权重大小比较方法: 样式表中的特殊性描述了

浅谈CSS优先级机制(一)

初次写随笔,如果有哪个地方不足还望大神指点改正,下面我来谈谈我对于CSS优先级的了解吧. CSS优先级,通俗的理解就是你给元素等一堆属性描述,然后最后到底是哪个描述作为最终显示的效果的规则或机制(个人理解).以下我将分为几个点来谈谈优先级的确定. 1.引入方式: CSS引入的方式,我目前只知道四种:内联式.内嵌式.导入式.链接式(当然网上的说法名称不一,理解就好). 各种引入方式的用法我在这里就不再多说了.以上我所按顺序罗列的四个方式是理论上的优先级顺序,也就是说,我使用内联式引入的css代码作

css 优先级 机制

多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 选择器的优先权--->权值 内联样式---1000: ID选择器----100:class选择器---10: 标签

CSS背景图片定位

原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; } 属性解释: back

css优先级

自适应布局 1.适应场景是:左右两列,一列设置浮动和设置宽度,另一列不需要设置浮动和宽度,只需设置overflow:hidden,就可以实现左右两列自适应.原理(BFC,清除浮动原理) 伪类与伪对象 在官方文档中伪类用classify来描述,而伪对象用create.从这里我们就能明白它们的区别: 伪对象则代表了某个元素的子对象,这个子对象虽然在逻辑上存在,但却并不实际存在于文档树中. 就像上文中的first-line,在DOM中其实并不存在.我们经常用的:before :after也属于伪对象.

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

css优先级汇总

我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴.优先级的顺序为内联样式>内部样式>外部样式. <head> <link href="style.css" rel="stylesheet" type="text/css" /> /*.color{color:red;}外部样式*/ &l

css优先级计算

主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同情况的优先级以数字的形式来表示的话,其对应关系如下: !important(10000) > 内联样式(1000) > id(100) > class(10) > tag(1) 则通常的css优先级比较可转化为数值大小的比较,如:#list li和.list .content ul l