CSS学习笔记（初识）

红太狼 2023-02-27 10:42 46阅读 0赞

**1.定义**

css是层叠样式表 （Cascading Style Sheet），又叫级联样式表，简称样式表。

**2.作用**

（1）用于HTML文档中元素样式的定义。实现了将内容与表现分离。

（2）提高代码的可重用性和可维护性。文件后缀是.css。

**3、css与HTML之间的关系**

（1）HTML用于构建网页的结构  
（2）CSS用于构建HTML元素的样式  
（3）HTML是页面的内容组成，CSS是页面的表现

结构层 HTML
    表示层 CSS
    行为层 JS

**4、导入CSS的方式**

（1）内联方式  
直接把CSS代码用style属性添加到开始标签中

（2）内部样式  
直接把CSS代码添加到头部的style标签中

（3）外部样式表

（4）导入式

`优先级：行内样式>内部样式>外部样式>导入样式`

**5、CSS样式表特征**

*  继承性
 *  层叠性
 *  优先级

**6、CSS基础选择器**

*  通用选择器，全局选择器(\*)
    
     *  可以与任何元素匹配
     *  常用于设置一些默认样式  
        优先级最低
 *  元素选择器
    
     *  HTML文档中的元素  
        p、b、div、a、img、body等
 *  类选择器
    
     *  如：.body\{color:red;\}  
        类名不能以数字开头  
        一个页面中class名字可以重复
 *  ID选择器
    
     *  \#box\{color：skyblue;\}  
        id的名字不能重复ID属性是惟一的
 *  合并选择器
    
     *  语法：选择器1，选择器2，…\{\}  
        可以提取共同的样式，减少重复代码

**7、CSS基础样式**

*  font-style 设置文本是否倾斜  
    normal（正常字体） 默认值  
    italic 斜体  
    如：

p{ font-style:italic;}     /*  倾斜 */

*  font-family 定义文本使用某个字体

p{ font-family:microsoft YaHei;}

`可以设置多个字体，排名越靠前优先级越高 默认值由浏览器决定`

*  font-weight 指定文字的粗细

p{  font-weight:normal;}   /*  默认值  */
    p{  font-weight:bold;}   /*  粗体  */

font-style 、 font-weight 、 font-size 、line-height 、 font-family

*  文本属性
    
     *  text-decoration 设置文字是否有修饰线，默认值是none

p{ text-decoration:underline;}   /*   指定文字的修饰线是下划线  */
    p{ text-decoration:overline;}   /*   指定文字的修饰线是上划线  */
    p{ text-decoration:through;}   /*   指定文字的修饰线是贯穿线，类似于删除标签的效果  */

`常用text-decoration:none;来去除a标签的下划线`

*  text-indent 文本缩进
    
     *  文本缩进属性是用来指定文本的第一行的缩进  
        也可以隐藏一个盒子中的文本  
        如

p{ text-indent:2em}    /*  首行缩进2个文字的大小  */
    p{ text-indent:-9999em;}    /*  用来隐藏文本   */

`1em和当前字体大小相等。如在谷歌浏览器中默认字体是16px， 那么，1em的默认大小是16px`

*  word-wrap 设置当前行超过指定容器的边界时是否换行
    
     *  如果容器中的单词过长，超出了容器本身的宽度会造成长单词溢出
     *  word-wrap:break-word;可设置过长的文本自动换行。
 *  line-height 设置对象的行高（`不允许使用负值`）  
    normal 默认，设置合理的行间距  
    number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距

**8、盒子模型**

盒模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）。

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。  
盒子模型特性：

*  每个盒子都有：边界、边框、填充、内容 4个属性；
 *  每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]
 *  border 边框  
    border : border-width || border-style || border-color  
    `注意：顺序不能错误。`  
    在style属性为空的情况下，整个边框是不会出现的，不写width会有默认3像的值，不写颜色会默认为黑色。
    
    border-radius: 左上角 右上角 右下角 左下角;

border-radius: 10px 40px;   /* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
    border-radius: 10px 40px  80px;  /* 左上角 10    右上角  左下角 40   右下角80 */
    border-radius: 10px 40px  80px  100px; /* 左上角 10  右上角 40  右下角 80  左下角 100 */

扩展：  
table\{ border-collapse:collapse; \}  
`collapse 单词是合并的意思，通过该属性可以来设置一个细线表格`

*  margin 外边距  
    margin是围绕在元素边框周围的空白区域，会在元素外创建额外的空白区域，外边距是透明的
    
        单边设置：
        margin-top/right/bottom/left:value;
        value可取值为像素、%、auto、负值
        外边框简写：
        margin:value(四个方向相同);
        margin:value(上下) value(左右)；
        margin:value(上) value(左右) value(下);
        margin:value(上) value(右) value(下) value(左)

**扩展1：盒子水平居中**

可以让一个盒子实现水平居中，需要满足一下两个条件：

*  必须是块级元素。
 *  盒子必须指定了宽度（width）
 *  然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

.header{  width:960px; margin:0 auto;}

**扩展2：清除元素的默认内外边距**  
为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* { 
       padding:0;         /* 清除内边距 */
       margin:0;          /* 清除外边距 */
    }

`Tips`： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。我们尽量不要给行内元素指定上下的内外边距就好了。

**扩展3：外边距合并**

**（1）、相邻块元素垂直外边距的合并（外边距垂直塌陷）**

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称**外边距塌陷**）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]  
解决方法：避免就好了。一般都是为一个元素添加margin-top或者 margin-bottom ，不必同时为两个元素同时加。

**（2）、嵌套块元素垂直外边距的合并**

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]  
**解决方案：**  
（1）可以为父元素定义1像素的上边框或上内边距。  
（2）可以为父元素添加overflow:hidden。

*  padding 内边距
    
        内容区域和边框之间的空间，会扩大元素边框所占用的区域

语法： padding:value;  
单边设置：  
padding-top/right/bottom/left:value;  
value可取值为像素，百分比，但不能为负数  
padding的简写：

padding:value(四个方向相同);
       padding:value(上下) value(左右);
       padding:value(上) value(左右) value(下);
       padding:value(上) value(右) value(下) value(左);

*  内容(content)宽度和高度（width 和 height）

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。  
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

/*外盒尺寸计算（元素空间尺寸）*/
      Element空间高度 = content height + padding + border + margin
      Element 空间宽度 = content width + padding + border + margin
      /*内盒尺寸计算（元素实际大小）*/
      Element Height = content height + padding + border （Height为内容高度）
      Element Width = content width + padding + border （Width为内容宽度）

`注意：`  
1、宽度属性 width 和高度属性 height 仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。  
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。  
3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

**（4）盒子模型布局稳定性**

根据稳定性来分，建议如下：  
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

`width > padding > margin`

原因：  
margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。  
padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。  
width 没有问题 我们经常使用宽度剩余法 高度剩余法来做。

**（5）盒子阴影**  
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

*  前两个属性是必须写的。其余的可以省略。
 *  外阴影 (outset) 默认值，但是不能写 ，想要内阴影写上 inset 即可。
 *  可以添加多个阴影，如同时添加内阴影和外阴影

/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
    box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

**9、background 背景**

1.background-color：设置盒子的背景颜色 ，背景色可以填充padding，也可以填充margin  
2.background-image：设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片

*  一个盒子大小正好和背景图大小一样：正好装进去
 *  一个盒子如果大于背景图：默认会在x和y轴进行平铺
 *  一个盒子如果小于背景图：只会显示背景图的一部分背景图的左上角和盒子的左上角对齐，左上角是指从padding开始，但是border中也会填充背景图片

3.background-repeat：控制是否平铺  
repeat-x 只平铺x轴 repeat-y 只平铺y轴 repeat x和y轴都平铺 **no-repeat** 不平铺

4.一个盒子中放一个大的或小的背景图，可以使用**background-position**进行定位

**10、元素**

*  块级元素  
    div、p、h等
 *  特点：  
    1.独占一行  
    2.默认宽度和父元素一样宽  
    3.css设定的宽高有效
 *  行内元素  
    span、a、em、strong等
 *  特点：  
    1.不会独占一行  
    2.宽度由内容决定  
    3.在css中设置宽度不起作用
 *  行内块元素  
    img标签等
 *  特点：  
    1.不会独占一行  
    2.可以设置宽高且有效
 *  元素的模式转换
    
     *  display:block;  
        `把某个元素的显示模式修改为块级元素，在img标签设置这个属性可以去除图片默认的3px间隙`
     *  display:inline;  
        `把某个元素的显示模式修改为行内元素`
     *  display:inline-block;  
        `把某个元素的显示模式修改为行内块模式`
 *  元素的显示和隐藏
    
     *  display:none; 没有显示模式，既看不见也不占据位置
     *  visibility:hidden; 隐藏，虽然看不见，但是占据位置
     *  visibility:visible; 可见（visibility的默认值）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20230209/68813d1bf6754fe7ba39a64376741f50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/1079534432f544ad96cd1af01afc5f3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]: /images/20230209/6ec0b455fa2c475095339f41efcae115.png