- 常用块元素:
- 常用内联元素
-
修改标签类型: display
- display:block; 指定对象为块元素
- display:inline; 指定对象为内联元素
-
内联块:display:inline-block;
- 块元素在一行显示。
- 内嵌元素支持宽高。
- 不设置宽高时内容撑开宽高。
- 换行会被解析为一个空格。
- 在IE6,IE7下不支持块标签。
要去除 display:inline-block;元素间的间隙有两种方式:1. 删除换行和空格。2. 设置父级元素 font-size: 0;,然后再单独设置当前字体大小。
/* 去除 内联块 元素间 间隙示例*/ ul{ font-size: 0; } ul>li{ font-size: 16px; display: inline-block; background: gray; color: #fff;; } 显示/隐藏元素标签元素显示或隐藏有三种方式
- visible:visible 设置元素可见。
opacity:0也可以使元素隐藏,但需要它只是通过调整元素的透明度来实现,元素还在,还是可以点击的,而上面两种则不可以点击,使用时需要注意。
元素滚动行为:overflow标签元素处理溢出内容的方式
也可以c通过overflow-x,overflow-y设置X,Y轴的滚动行为。
浮动最初,引入 float 属性是为了能让 web 开发人员实现简单的布局,包括在一列文本中浮动的图像,文字环绕在它的左边或右边。你可能在报纸版面上看到过。但 Web 开发人员很快意识到,任何东西都可以浮动,而不仅仅是图像,所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局,它使信息列得以横向排列
想要将元素排列到一行可以使用display:inline-block; 但是内联块会存在间隙的问题。这里可以选择浮动的方式将元素排列到一行。
浮动为左浮动float:left;和右浮动float:right;
浮动的特点清浮动是由于浮动时提升元素的层级,脱离了文档流破坏了文档流结构。 清浮动有以上6种常用方式:
-
给父级也添加浮动
父级元素中如果有margin: 0 auto;左右居中的效果将失去作用
-
给父级添加display: inline-block;
父级元素中如果有margin: 0 auto;左右居中的效果也将失去作用。
-
在浮动元素下添加空标签清除浮动
<style> .box1{width: 100px;margin: 0 auto;border: 5px solid red;} .box2{width: 100px;height: 100px;background: blue; float: left;} .clear{clear:both;} </style> <div > <div ></div> <div ></div> </div>IE6下会有最小高度问题(IE6下高度小于19px的元素,高度会被设置为19px,解决方案设置font-size:0,但仍然会有2px的高度。),IE5下margin: 0 auto;不起作用。
浮动元素下添加标签清除浮动
<style> .box1{width: 100px;margin: 0 auto;border: 5px solid red;} .box2{width: 100px;height: 100px;background: blue; float: left;} </style> <div > <div ></div> <br clear=‘all‘> </div>这样写不符合工作中:结构、样式、行为三者分离的原则。代码有耦合。
::after伪类清除浮动
<style> .box1{width: 100px;margin: 0 auto;border: 5px solid red;} .box2{width: 100px;height: 100px;background: blue; float: left;} .clear:after{content: ‘‘;display: block;clear: both;} .clear{zoom:1; } </style> <div > <div ></div> </div>IE5/6/7下不支持:after伪类。但IE5/6/7下只要触发hasLayout就不需要清除浮动。使用zoom:1;触发 hasLayout 这样会对其它代码造成的干扰降到最低。
hasLayout介绍
overflow: hidden;清浮动
<style> .box1{width: 100px;margin: 0 auto;border: 5px solid red;overflow: hidden;} .box2{width: 100px;height: 100px;background: blue; float: left;} </style> <div > <div ></div> </div>IE5/6下不支持。解决为法:配合zoom:1;使用
position 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置。
定位分类- 对象遵循常规流,默认定位选项
- 定位上下文:绝对定位元素的父元素的position属性。
- 定位上下文:偏移定位是以窗口为参考。
top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。
定位层级使用z-index属性,可以更改定位堆叠顺序。
z-index 的值为数字,数字越大堆叠在顶层,数字越小堆叠在底层。
伪类伪类只有在一定的条件下才能作用到标签上。
超链接的4种状态- a:link {color:#FF0000;} /* 未访问的链接 */
- a:visited {color:#00FF00;} /* 已访问的链接 */
- a:hover {color:#FF00FF;} /* 鼠标划过链接 */
- a:active {color:#0000FF;} /* 已选中的链接 */
注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。 注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
- E:focus 设置对象在成为输入焦点时的样式。
- E:first-child 匹配第一个子元素
- E:last-child 匹配最后一个子元素
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的background-image,background-repeat,background-position的组合进行背景定位,background-position可以用数字精确地定位出背景图片的位置。
优点:- background-image 使用图像作为背景
- background-repeat 背景图像如何填充
- background-position 指定背景图像在元素中出现的位置
可以像使用字体一样使用图片。可以通过font-size设置图片大小。通过color设置图片颜色。
cssreset重置HTML标签的默认样式。HTML标签会有默认情况下不同浏览器中都会有一定的样式属性这些样式也可能会因为不同的浏览器所不同,这些样式并不是程序所需要的,所以在程序一开始就需要先将这些默认样式给清除掉。
个人自学前端7-CSS2
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)