个人自学前端7-CSS2

2023-12-27 18:08:21

块元素与内联元素

块元素

独占一行,默认情况下，其宽度自动填满其父元素宽度
可以设置width，height属性
可以设置margin和padding属性

内联元素

相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
不支持设置width，height
除了margin-top、margin-bottom`，不支持外其它的内外边距都是支持的。

常用块元素：

<div>   <h1>    <h2>    <h3>    <h4>    <h5>    <h6>
<p>     <ul>    <ol>  <table> <tr>  <tbody> <tfoot> <pre> ...

常用内联元素

<a>   <s>   <b>    <input>  <i>   <span> 
<select>    <sub>   <sup> ...

修改标签类型: 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;;
}

显示/隐藏元素

标签元素显示或隐藏有三种方式

display:none; 隐藏元素,不保留元素所占的空间。
visibility:hidden;隐藏元素，保留元素所点空间。
- visible：visible 设置元素可见。
opacity：<number>; 设置元素透明度。取值 0~1。0全透明，1不透明。

opacity:0也可以使元素隐藏，但需要它只是通过调整元素的透明度来实现，元素还在，还是可以点击的，而上面两种则不可以点击，使用时需要注意。

元素滚动行为：overflow

标签元素处理溢出内容的方式

overflow: hidden; 当内容超出时隐藏超出部分。
overflow: scroll; 设置元素有滚动条。无论是否超出内容滚动条都会出现
overflow: auto; 当内容超出时呈现滚动条，反之则没有滚动条。相比于 overflow: scroll;用户体验更好。
overflow: visible 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 class="box1">
    <div class="box2"></div>
    <div class="clear"></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 class="box1">
    <div class="box2"></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 class="box1 clear">
    <div class="box2"></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 class="box1">
    <div class="box2"></div>
</div>

IE5/6下不支持。解决为法：配合zoom:1;使用

定位 position

position 定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。

定位分类

position: static; 静态定位
- 对象遵循常规流，默认定位选项
position: relative; 相对定位
position: absolute; 绝对定位
- 定位上下文：绝对定位元素的父元素的position属性。
position: fixed; 固定定位
- 定位上下文：偏移定位是以窗口为参考。

移动位置

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 Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-image,background-repeat,background-position的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。

优点：

减少网页的http请求，从而加快了网页加载速度，提高用户体验。
减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

缺点：

在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。
CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置。
在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。
精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，现在一般用字体图标代替精灵图。

精灵图使用属性

background-image 使用图像作为背景
background-repeat 背景图像如何填充
background-position 指定背景图像在元素中出现的位置

字体图标库

可以像使用字体一样使用图片。可以通过font-size设置图片大小。通过color设置图片颜色。

cssreset

重置HTML标签的默认样式。HTML标签会有默认情况下不同浏览器中都会有一定的样式属性这些样式也可能会因为不同的浏览器所不同，这些样式并不是程序所需要的，所以在程序一开始就需要先将这些默认样式给清除掉。

码农公寓