CSS 基础

百事可爱-后悔下凡

于 2018-09-17 21:37:09 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/weixin_42617917/article/details/82731621

版权

前端未分类笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

元素

行内元素
- a
- abbr
- input
- img
- label
块元素
- div 常用块级容易，也是 css layout 的主要标签
- dl 定义列表
- ol 排序表单
- ul 非排序列表
- table 表格
- form 交互表单
- fieldset form 控制组
- isindex input prompt
- h1 - h6 标题
- p 段落
- pre 格式化文本
- hr 水平分隔线
- menu 菜单列表
- dir 目录列表
- address 地址
- center 居中对齐块
- blockquote 块引用
- noframes - frames可选内容，（对于不支持 frame 的浏览器显示此区块内容
- noscript 可选脚本内容（对于不支持 script 的浏览器显示此内容）
可变元素
1. 可变元素为根据上下文语境决定该元素为块元素或者内联元素
2. script - 客户端脚本
3. iframe - inline frame
4. button - 按钮
5. applet - java applet
6. del - 删除文本
7. ins - 插入的文本
8. map - 图片区块 (map)
9. object - object对象
置换元素
1. 置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
2. 他们区别一般inline元素是：这些元素拥有内在尺寸内置宽高他们可以设置width/height属性。他们的性质同设置了display:inline-block 的元素一致。
3. img input select textarea button label
空元素
1. <br/> 换行
2. <hr> 分隔线
3. <input> 文本框等
4. <img> 图片
5. <link>
6. <meta>

定位

有多少种定位
1. CSS 有 4 种不同类型的定位。
2. static：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
3. relative：生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。移动相对定位元素，但它原本所占的空间不会改变
4. fixed：定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
5. absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。如果元素没有已定位的父元素，那么它的位置相对于:

排版

元素水平垂直居中
已知元素宽高的方法：
1、利用定位及设置元素margin值为自身的一半。(兼容性好)
```
.box{
    width: 400px;
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    width: 300px;
    height: 100px; 
    border: 5px solid #f00; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin: -50px 0 0 -150px;
}
```
2、margin：auto:
position: absolute; left: 0; right: 0; top: 0; bottom: 0;这是自动填充父元素的可用空间。然而给子元素设定了宽高，那么多余的空间，会被margin：auto平均分配。
```
.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 300px; 
    height: 100px; 
    margin: auto; 
    border: 5px solid #f00;
    }
```
第二未知元素宽高的方法：
1、利用css3属性transform实现。（这种方法在移动端被广泛使用。但是，只支持高版本浏览器（IE9＋以上的浏览器支持））
```
.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    position: absolute; 
    left: 50%; 
    top: 50%; 
    border: 5px solid #f00; 
    transform: translate(-50%,-50%);
}
```
2、将父元素设置成display: table, 子元素设置为单元格 display: table-cell。这个方法跟上面介绍的方法不同，它不是让元素居中，而是让元素包含的内容居中。
（利用表格的特性，将子元素看成行内元素，实现元素中的文字(文字可以是单行的，也可以是多行的)或图片水平垂直居中）
```
.box{
    width: 400px;
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    display: table;
}
.innerbox{
    display: table-cell;
    vertical-align: middle; 
    text-align: center; 
    border: 5px solid #f00;
}
```
3、css3新的布局方法，弹性布局 display: flex。这个方法，在已知或未知元素宽高的情况下，都能使元素居中显示。
justify-content（水平位置调整）：
flex-start：全靠左边
flex-end：全靠右边
center：全水平居中
space-between：相互之间间距相等
space-around：周围间距相等

align-content （垂直上位置调整）：
flex-start：全靠顶部
flex-end：全靠底部
stretch：拉伸铺满
baseline：位于元素基线上（一般与flex-start效果一样）
center：垂直居中
```
.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.innerbox{
    width: 300px; /*宽度可以省略*/
    height: 100px; /*高度可以省略*/
    border: 5px solid #f00; 
    font-size: 16px;
    }
```
元素水平居

文字在块内水平居中：设置text-align: center;
元素有宽度：margin: 0 auto;
元素没有宽度:
第一种方法：用table样式(浮动元素无效)
```
   SecondMenuBody{
    display: table; /*重点就是这个属性,这个样式会告知浏览器当前元素的宽度,采用最小的宽度.不是默认全宽*/
    margin: 0 auto; 
}
```
第二种方法：外层设置相对定位且浮动，left:50%，这样左边位置就偏移到了中间的位置;然后内层设置相对定位，left:-50%，这样正好向左偏移自身宽度的一半，实现了居中。（适用于浮动元素居中）
```
<div class="wrap">
　　<div class="inner">html:让inner居中</div>
</div>
.wrap{float:left;/*自适应内容宽度*/position:relative;left:50%;}
.inner{position:relative;left:-50%;}	  
```
第三种办法：外层使用text-align：center;我们知道text-align:center是让里面的内联元素居中，很显然在外层设置text-align:center后，我们让里面的元素变成内联元素即可，则可以对里面元素使用display:inline-block;*display:inline(兼容IE6-7)（不浮动元素居中）
```
外层元素{text-align:center;}
内层元素div{display:inline-block;text-align:left;}
```

元素垂直居中
1. 文字在快内垂直居中：vertical-align: middle;
2. 单行行内元素内垂直居中：设置line-height
3. 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
  缺点： Internet Explorer(甚至 IE8 beta)中无效
  有点：可以动态改变高度（不用CSS）
```
#wrapper {
    display: table;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}

<div id="wrapper">  
    <div id="cell">
        <div class="content">Content goes here</div>
    </div>
</div>
```
4. 制定高度的元素居中使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。(适用于所以浏览器)
```
<style>
 .content {
    position: absolute;
    background-color: aqua;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* negative half of the height */
}
</style>
<div class="content"> Content goes here</div>
```
左边固定右边自适应
清楚浮动方式有哪些，哪一种比较好
BFC
margin重叠规则：
1、水平边距永远不会重合。

2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。

3、相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。

4、设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。

5、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。

6、设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。

7、如果一个盒模型的上下margin相邻，这时它的margin可能重叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否重叠。
a、如果元素的margin和它的父元素的margin-top重叠在一起，盒模型border-top的边界定义和它的父元素相同。
b、另外，任意元素的父元素不参与margin的重叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。
一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠。
注意，那些已经被重叠覆盖的元素的位置对其他已经重叠的元素的位置没有任何影响；只有在对这些元素的子元素定位时，border-top边界位置才是必需的。

8、根元素的垂直margin不会被重叠。
浮动中元素高度为零
display 的值有多少种

block:
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
能够改变元素的height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline:
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
不能更改元素的height，width的值，大小由内容撑开.
可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
inline-block:
结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素。
table
- display: table;
- display: table-row;
- display: table-cell;

怎么去除inline-block默认间距
方法一：把标签内容写在同一行
此方法直接针对引起原因进行处理，所以当我们把代码写在同一行的时候，间距就可以消除，可是鉴于这样书写的代码可读性，不推荐使用。
方法二：父元素设置font-size:0
此种方法给父元素设置了font-size:0之后必须给该元素设置font-size
方法三：给该元素float:left
此种方法虽然可以实现取消间距，但是可能对布局产生影响，需要考虑布局
方法四：letter-spacing
该方法兼容性良好，可以考虑使用。
这里父元素需要设置letter-spacing属性的值为一个负值，具体值的大小看情况，但是我们可以无限写小，无妨碍，如letter-spacing：-1000px
该元素需要设置letter-spacing：0
inline-block布局 vs 浮动布局

自适应

什么是弹性布局
如何写可以适配不同设备的 CSS

单位

px 和 em 区别
什么是 rem

预处理

什么是 CSS 预处理
CSS 预处理有什么优缺点

综合

link 和 @import 的区别
1. 本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
2. link 是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
3. link 引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
4. link 是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
5. link 支持使用JavaScript控制DOM去改变样式；而@import不支持。
```
/* blue.css */
@import url("green.css");
div{
    background-color: blue;
}
```
img 的 display: block 属性
1. 让图片成块元素显示，单独显示在一行，让其他的元素换行显示
2. 把图片的显示方式变为块级元素，这样就可以像块一样去操作图片
什么是CSS Hack
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
```
div{
	background:green; /*forfirefox*/
	*background:red; /*forIE6*/(bothIE6&&IE7)
}
```

百事可爱-后悔下凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 基础

综合link 和 @import 的区别本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。link 是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。link 引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。link 是XHTML标签，无兼容问题；@import是在CSS2....
复制链接

扫一扫