CSS 基础学习笔记

猫董
168 阅读4分钟

CSS中的优先级

  • 原则：后解析的内容样式会覆盖先解析的。
    1. 同一个选择器内，自上到下顺序执行。
    2. 同一类型的选择器，自上到下顺序执行。
    3. 不同类型的选择器的优先级关系：精确性越高优先级越高（*<div<class<id）
    4. 外部样式和内部样式：先合并再解析，同等条件下内部样式优先级要高于外部样式。
    5. 内联样式：优先级要高于外部样式和内部样式。
    6. 样式后面加!important，可以提高优先级到最高。

CSS中的继承原则

  1. 只有文字文本相关的样式才会被子元素继承，其他不可以。
  2. 对于块级元素，如果宽度和高度没有设定，则宽度会由其父级元素的宽度决定，高度会有内容的高度决定。

CSS选择器

  • 组合选择器
    1. div, p{...}
    2. div p{...}
    3. div>p{...} 直系子元素选择器。
    4. div+p{...} 相邻同级元素选择器。

CSS属性选择器

  1. [属性] 有这个属性的元素。
  2. [属性=值]
  3. [属性~=值]
  4. [属性^=值] 开头
  5. [属性$=值] 结束

伪元素选择器

可以理解为html文档自动添加的隐藏元素。常用的有::before,::after, ::first-letter, ::first-line等。 以before和after为例：

<p>
<!--before-->
这是一段话。
<!--after-->
</p>

伪类选择器

  • 对于链接a标签主要有4个状态：a:link,a:hover,a:active,a:visted.

背景操作

background-color: red;
background-image: url('');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 100px,200px; //(也可以用%)

可以按照顺序简写为：

background: red url('') repeat-x 50%,0 fixed; //（可以缺省）

字体操作

1. 常用字体操作

font-family: "Microsoft YaHei", "宋体";
font-size: 30px; //默认字体大小16px，也就是1em
font-weight: bold; //lighter or normal
font-style: italic;
line-height: 60px;

也可以简写为： font: style weight size/line-height family; //其中size和family是必选项

2. 更多字体操作

color: red;
letter-spacing: 10px; //字母间距
word-spacing: 10px;//单词间距
direction: rtl/ltr;
text-decoration: none/line-through/overline/underline;//下划线等等
text-align: center/left/right/justify; //对齐方式
text-indent: 60px; //缩进
text-transform: uppercase/lowercase/capitalize; //大小写转换

用white-space/overflow/text-overflow可以做不换行，超出显示省略号等效果

white-space: nowrap; //不换行
overflow: hidden;
text-overflow: clip/ellipsis; //clip表示直接截断，ellipsis表示省略号

图片与文字的对齐（垂直对齐）：
vertical-align: top/center/bottom;

列表的处理

  • 列表项圆点的处理（改成图标）：
ul{
    list-style-type: none; //可以有square，disc, cycle等样式
}
li{
    background-image: url('');
    background-repeat: no-repeat;
    height: 50px;
    padding: 25px 50px 0; //通过调整padding来调整li内容相对于图片的位置
}

盒子模型

  • 典型的盒子模型如下：
.box{
    border: 2px solid black;
    padding: 20px; //顺时针设置
    margin: 20px; //顺时针设置
    background-color: yellow; //background 包括内容和padding， 不包括border和margin
}
  • margin的使用过程中需要注意两个问题：
    1. 两个盒子平级的情况下，上下margin会自动合并，取较大值，左右margin则不会；
      如果想让上下margin相加可以设置float:left; 或者 display: inline-block;
    2. 两个盒子嵌套的情况下，如果父盒子没有内容，没有border， 没有padding，则子盒子的margin不会生效；解决办法就是给父盒子加上内容或者border或者padding；

布局之浮动与清除浮动

  • float: left; 操作会使div脱离文档流, 其位置浮动在上一个元素的下面，这会产生两个问题： 后面的元素被覆盖， 父元素高度坍塌；为了解决这两个问题就需要在后面的元素上清理浮动：clear: both;

  • 清理浮动可以在浮动div 的后面加上一个空的div，并在空div上面使用clear: both;但这会引入一个空div，并不是推荐的做法；
    常用的做法是利用父级的伪元素::after来清理浮动：

.container::after{
    content:'';//加上空内容；
    display: block; //after 伪元素是行级元素需要转换成块级元素；
    clear: both;
    }
  • 正常情况下，还会出现前面盒子模型提到的由于父元素没有内容导致子元素margin不生效的问题， 为了同时解决这两个问题，最常用的代码方案如下：
.container::before, .container::after{
    content:'';
    display: table;
}
.container::after{
    clear: both;
}
  • 在父级元素上加overflow:hidden;也可以清除浮动，参考链接

布局之定位

position主要有4个值：

position: static; //默认值
position: fixed; //固定在页面某个位置，不随页面滚动；常用于导航栏或者回到顶部
position: relative;//相对于父元素移动，仍然占有位置，后面的元素不会补位上来
position: absolute;
// 与浮动类似，不再占有位置，后面的元素会补位上来；    
//相对于非static的父级移动，（会向上查找，直到找到非static的父级或者body；常与relative共用；）
avatar
文章
阅读
粉丝