div+css知识点

前端书写规范:

1、所有书写均在英文半角状态下的小写;

2、id,class必须以字母开头;

3、所有标签必须闭合;

4、html标签用tab键缩进;

5、属性值必须带引号;

6、<!-- html注释 -->

7、/* css注释 */

8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签;

9、p,dt,h标签  里面不能嵌套块属性标签;

10、a标签不能嵌套a;

11、内联元素不能嵌套块;

 

div的display默认是block;

a的display默认是 inline-block

margin 外边距

外边距复合

margin:top right bottom left;

margin 外边距

外边距的问题:

1、上下外边距会叠压;

padding:内边距

padding:top right bottom left;

注意:内边距相当于给一个盒子加了填充厚度会影响盒子大小。

font-size                  文字大小(一般均为偶数)

font-family              字体(中文默认宋体)

color                        文字颜色(英文、rgb、十六位进制色彩值)

line-height              行高

text-align                文本对齐方式

text-indent             首行缩进(em缩进字符)

font-weight            文字着重

font-style                文字倾斜

text-decoration      文本修饰

letter-spacing         字母间距

word-spacing         单词间距(以空格为解析单位)

 

font:font-style |
font-weight | font-size/line-height | font-family;

<div>块</div>

link            未访问(默认)

hover         鼠标悬停(鼠标划过)

active         链接激活(鼠标按下)

visited        访问过后(点击过后)

IE6不支持a以外其它任何标签的伪类;

IE6以上的浏览器支持所有标签的hover伪类;

a标签(链接,下载,锚点)

<img src="1.png"
alt="美女"/><!-- 单标签 -->

<a href="#">a标签(链接,下载,锚点)</a>

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

 

<p>段落</p>

<strong>强调(页面展示为粗体)</strong>

<em>强调(页面展示为斜体)</em>

<span>区分样式</span>

 

<ol><!-- 有序列表 -->

    <li>列表项</li>

 
<li>列表项</li>

 
<li>列表项</li>

 
<li>列表项</li>

</ol>

 

<ul><!-- 无序列表 -->

    <li>列表项</li>

 
<li>列表项</li>

 
<li>列表项</li>

 
<li>列表项</li>

</ul>

 

<dl><!-- 定义列表 -->

    <dt>定义列表标题</dt>

 
<dd>定义列表项</dd>

 
<dd>定义列表项</dd>

 
<dd>定义列表项</dd>

</dl>

<base
target="_blank"></base>链接在新的页面打开

<a href="css2—常见标签(上).ppt">a标签(下载)</a>

id 选择符#

群组选择符#box2,#box1,#box3{width:100px;
height:100px; background:blue;}

class(类) 选择符[可以重复使用的id]

类型  选择符p{width:100px; height:100px; background:blue;}

包含  选择符div span p{width:100px; height:100px; background:blue;}

通配符*{width:100px; height:100px;
background:blue;}

同级样式默认后者覆盖前者;

样式优先级

类型(1) 
<  class(10)  < 
id(100)  <  style行间样式(1000) < js

测试:

       A、#header #div1 .box1 div .section p .link{………………}

       B、#some .base #font #call a{………………}

答案:B

 

 

内联,内嵌,行内属性标签:

1、       
默认同行可以继续跟同类型标签;内联,内嵌,行内属性标签:

默认同行可以继续跟同类型标签;

内联元素,默认是几个内联元素都可以在同一行上显示。比如是<a>、<span>等。

块属性标签:

1、        默认独占一行显示;

块级元素,默认是独自占据一行的。比如是<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr />

/* 默认样式重置 (css reset)  */

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}

ol,ul{list-style:none;padding:0;margin:0;}

a{text-decoration:none;}//去掉下划线

img{border:none;}去掉边框

内联,内嵌,行内属性标签:

        1、默认同行可以继续跟同类型标签;

        2、内容撑开宽度

        3、不支持宽高

        4、不支持上下的margin和padding

        5、代码换行被解析

       

块属性标签:

        1、默认独占一行显示;

        2、没有宽度时,默认撑满一排

        3、支持所有css命令

display:block;  显示为块

display:inline;  显示为内嵌

inline-block一行内的块

span{display:block;}

div{display:inline;}

inline-block

特性:

1、块在一行显示;

2、行内属性标签支持宽高;

3、没有宽度的时候内容撑开宽度

问题:

1、代码换行被解析;

2、ie6 ie7 不支持块属性标签的inline-block;

cursor 指针样式 (规定要显示的光标的类型)

cursor:pointer | text | move ……

cursor:url(hand.cur),pointer;

浮动:

float浮动:

1、块在一排显示

2、内联支持宽高

3、默认内容撑开宽度

4、脱离文档流

5、提升层级半层

float:left | right | none | inherit;

文档流是文档中可显示对象在排列时所占用的位置。

浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

clear:left | right | both | none | inherit;元素的某个方向上不能有浮动元素

clear:both;  在左右两侧均不允许浮动元素。

inline-block

1.使块元素在一行显示

2.使内嵌支持宽高

3.换行被解析了

4.不设置宽度的时候宽度由内容撑开

5.在IE6,7下不支持块标签

浮动:

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

浮动: left/right/none

元素加了浮动,会脱离文档流 ,按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

4.脱离文档流

5.提升层级半层

clear left/right/both/none 元素的某个方向不能有浮动元素     

 ** 文档流是文档中可显示对象在排列时所占用的位置

清浮动

1.给父级也加浮动

2.给父级加display:inline-block

3.在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

4.在浮动元素下加<br clear="all"/>

5. 给浮动元素的父级加{zoom:1;}

:after{content:""; display:block;clear:both;}

**在IE6,7下浮动元素的父级有宽度就不用清浮动

haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高

display: inline-block

height: (任何值除了auto)

float: (left 或 right)

width: (任何值除了auto)

zoom: (除 normal 外任意值)

overflow 溢出

auto 溢出显示滚动条

scroll 默认就显示滚动条

hidden 溢出隐藏

IE6下的双边距BUG

在IE6下,块元素有浮动和横向margin的时候,横向的margin值会被放大成两倍

解决办法: display:inline;

IE6,7下li的间隙

在IE6,7下li本身没浮动,但是li内容有浮动的时候,li下边就会产生几px的间隙

解决办法: 1.给li加浮动

         .给li加vertical-align:top;

vertical-align: top;

用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐. 
它的值比较多:baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit 
比如说top就是垂直对齐文本的顶部 。 
IE6下的最小高度问题
overflow: hidden;
定位
position:relative;  相对定位
a、不影响元素本身的特性;
b、不使元素脱离文档流;
c、如果没有定位偏移量,对元素本身没有任何影响;
定位元素位置控制top/right/bottom/left  定位元素偏移量。
position:absolute;  绝对定位
a、使元素完全脱离文档流;
b、使内嵌支持宽高;
c、块属性标签内容撑开宽度;
d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于整个文档发生偏移;
e、相对定位一般都是配合绝对定位元素使用;
position:fixed; 固定定位
与绝对定位的特性基本一致,差别是始终相对整个文档进行定位;
问题:IE6不支持固定定位;
定位元素 默认后者层级高于前者
z-index:[number];  定位层级
标准   不透明度  opacity:0~1;
IE私有  filter:alpha(opacity=0~100);
ie6 下父级的overflow:hidden;是包不住子级的相对定位的
在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
定位的兼容问题、清浮动方法
position:relative;
        在 IE6 下父级的 overflow:hidden; 包不住子级的relative;
 
position:absolute;
        在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
 
position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法;
 
position:fixed;  固定定位元素子级的浮动可以不用写清浮动方法;(IE6不兼容)
css精灵
元素的宽度由内容撑开
display:inline;   
display:inline-block;
float
position:absolute
position:fixed
CSS精灵 优点:
利用CSS 精灵能很好地减少了网页的http请求次数,从而大大的提高了页面的性能,这也是CSS 精灵最大的优点;减少图片大小
CSS精灵 缺点: 
降低开发效率;
维护难度加大;
 
 

 

 

 

 

 

 

 

 

时间: 2024-10-08 06:41:02

div+css知识点的相关文章

DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚线下划线 列表型CSS虚线下划线 CSS定义一条水平虚线 1.CSS边框虚线   -   TOP 这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思.一.四边为虚线边框border

2天驾驭DIV+CSS (实战篇)(转)

这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大练

这些HTML、CSS知识点,面试和平时开发都需要 No8-No9

系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) No8.媒体操作 1.增加图片 (1)img元素:自包含元素,不能封装其他任何元素.正确写法是<img>,而不是<img/>或者<img>&l

跟着传智播客学习asp.net之DIV+CSS

div+css详解 学习资料:韩顺平div+css视频.css禅意花园.别具光芒.csdn网页设计专栏.开源之祖sourceforeg.net.php开源大全 www.php.open.com Div+css (sascading style sheets:层叠样式表)是什么? 传统table布局缺点: 1. 显示样式和数据是绑定在一起的 2. 布局的时候灵活度不高 3. 一个页面可能会有大量的<table>元素,代码冗余 4. 增加带宽(200字节) 5. 搜索引擎不喜欢这样的布局 优点 1

这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7 No5.文章段落 1.文字属性 文字属性包含font-*和text-*两类. 2.基于font的属性 (1)font-family:字体属性,多个字体之前用逗号隔开.如果第一个字体没找到,则依次找后面的字体.例如: body { font-family: "Helvetica Neue", Helvetica, Arial, sans-se

这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则)

这些HTML、CSS知识点,面试和平时开发都需要 No10-No11

系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则) No10.表格数据操作 1.Table 元素 (1)一般元素:t

这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)

系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则) 2.进阶篇 如何提升我的HTML&CSS技术,编写有

这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则) No5.文章段落 1.文字属性 文字属性包含font-*和tex