CSS基础

用户1869955981204
56 阅读6分钟

浮动

视觉格式化模型，将盒子的排列方式分为三种方式：

  1. 常规流
  2. 浮动
  3. 定位

应用场景

  1. 文字环绕
  2. 横向排列

浮动的基本特点

修改 float 属性的值为：

  • left：左浮动，元素靠左靠上。
  • right：右浮动，元素靠上靠右。

默认值为：none。

  1. 元素浮动之后，会将元素的display属性更改为block。
  2. 浮动元素的包含块，和常规流一样，也是父元素的内容盒。

盒子尺寸

  1. 宽度为auto的时候，表示适应内容宽度。（常规流布局吸收剩余空间）
  2. 高度为auto的时候，跟常规流一样（适应内容）
  3. margin设置为auto时，相当于0
  4. 边框，内边距，百分比设置(宽度：margin，padding 相对于包含块的宽度)，与常规流相同。

盒子排列

  1. 左浮动，元素靠左靠上。

  2. 右浮动，元素靠上靠右。

  3. 浮动盒子，会避开常规流块盒。

  4. 常规流块盒在排列的时候，无视浮动盒子。（就会造成浮动盒子覆盖常规流块盒的现象） image.png

  5. 行盒在排列的时候，会避开浮动盒子。

  6. 外边距合并不会发生。

如果文字没有在行盒中，浏览器会自动生成一个行盒，包裹文字，该行盒叫做匿名行盒。

高度坍塌

常规流盒子，高度自动，计算高度时，不会考虑浮动盒子。

解决方式：清除浮动，涉及css属性，clear

  • 默认值：none;
  • left：清除左浮动，该元素必须出现在前边所有左浮动盒子的下方。
  • right：清除右浮动，该元素必须出现在前边所有右浮动盒子的下方。
  • both：清除左右浮动。

定位

手动控制元素在包含块中的精准位置。

涉及的css属性：position

取值：

  • 默认值：static，静态定位。
  • relative：相对定位。
  • absolute：绝对定位。
  • fixed：固定定位。
  • sticky：粘性定位。

定位元素会脱离文档流（相对定位除外）

**绝对定位，固定定位元素一定是块盒**

脱离文档流的元素特点：

  1. 文档流中的元素摆放时，会忽略脱离了文档流的元素。
  2. 常规流元素自动计算高度时，会忽略脱离了文档流的元素。

相对定位

不会导致元素脱离文档流，只会在原来的位置偏移。

可以通过 left，top，right，bottom，来设置位置偏移。（不会对其他盒子造成影响）

绝对定位

  1. 宽高为anto，适应内容。
  2. 包含块：往上找，找离他最近的定位元素的填充盒。若找不到，他的包含块为整个网页。
  3. 外边距不会合并。

固定定位

其他情况和固定定位完全一样。外边距不会合并。

包含块不同：固定定位包含块为视口（浏览器的可视窗口）

粘性定位

粘性定位可以认为是相对定位和固定定位的混合（子元素在跨越特定的阀值前是相对定位，之后为固定定位）

当粘性约束元素滚出视口时，粘性元素也会滚出视口。

相对于离他最近的滚动祖先元素。

注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。

粘性定位不生效：

  1. 未指定 left，right，top，bottom中的任何一个值。
  2. 垂直滚动时，粘性约束元素高度小于等于粘性元素的高度。

定位下的居中

某个方向居中：

  • 定宽（高）
  • 将左右（上下）距离设置为0
  • 将margin设置为auto

绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间。

多个定位元素重叠时

设置 z-index，通常情况下，该值越大，越靠近上面。只有定位元素设置有效。

可以设置为负数，遇到常规流元素和浮动元素时会被覆盖。

更多的选择器

更多伪类选择器

  1. first-child：选中第一个子元素
  2. last-child：选中最后一个子元素
  3. nth-child：选中指定位置的子元素
元素:first-child{
    
}

元素:last-child{

}

/*必须是a元素，必须是第五个子元素*/
a:nth-child(5){

}

/*表示选择偶数*/
a:nth-child(2n/even){

}

/*表示选择奇数*/
a:nth-child(2n+1/odd){

}

更多为元素选择器

  1. first-letter：选中元素中的第一个字母。
  2. first-line：选中元素中第一行的文字。
  3. selection：选中被用户框选的文字。
p::first-letter{
    
}

<p>asdfghhj</p>

更多的样式

透明度

  1. opacity，他设置的是整个元素的透明（里面的子元素会变透明），取值 0~1。
  2. 在颜色设置 rgba(),取值 0~1。（能设置颜色的地方都可以，color border background-color等）

鼠标

通过设置 cursor 属性来设置鼠标样式。

可以设置为图片：

/*
    图片的格式一般为ico或者cur格式，使用其他格式金可能会有兼容性问题
    auto表示，如果图片出问题，使用浏览器默认的鼠标样式。
*/
cursor:url("img.ico"),auto;

盒子隐藏

  1. display：none; 页面不再渲染元素，可能会影响其他盒子的布局排列。
  2. visibility：hidden; 渲染元素，只是从视觉上移除盒子，实际盒子仍占据空间。

背景图

img元素属于html概念。

背景图属于css概念。

如何选择使用背景图还是img元素：

  1. 当图片属于网页内容的时候，必须使用img元素。
  2. 当图片用于美化网页时，使用背景图。

涉及的css属性

  1. background-image：设置背景图片。
  2. background-repeat：设置背景图不重复。

默认情况下，背景图在横坐标和纵坐标会不断重复。

  body {
            /* background-image: url("./u=2419847601\,2482350701&fm=202&src=766&ernie_sim_online&mola=new&crop=v1.jpg"); */
            /* 背景图不重复 */
            background-repeat: no-repeat;
            /* 只在横坐标或者纵坐标重复 */
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */

            /* background-size: cover; */


        }

        div {
            width: 1000px;
            height: 300px;
            border: 2px solid #000;
            background-image: url("./u=2419847601\,2482350701&fm=202&src=766&ernie_sim_online&mola=new&crop=v1.jpg");
            background-repeat: no-repeat;
            /* 横向纵向居中 */
            /* background-position: center; */
            /* 横向居中，纵向靠下，其他也类似 */
            background-position: center bottom;
        }

  1. backgroung-size：设置背景图的尺寸。类似于图片的object-fit

    取值： 预设值

    • contain，表示背景图完整显示。
    • cover，表示撑满区域并且图片比例不变。

    百分比：100% 100%,横向和纵向撑满。

  2. background-position：设置背景图的位置。雪碧图的应用。

    通过设置center，left，right，top，bootom这些预设值设置背景图的位置。

    也可以设置数字和百分比。

    container{
/* 横向居中，纵向靠下 */
    background-position:center bottom;

/* 靠左，靠上距离10px */
    background-position:10px 10px;
}

  3. background-attachment: fixed; 背景图相对于视口固定

  4. background-color：背景图与背景颜色共用。

background是一个复合属性：

/*由于尺寸和位置都有可能时数值，所以浏览器规定先写位置然后/再写尺寸*/
/*属性如果不写，默认时默认值*/
div{
 background:url("/image.jpg") no repeat 50% 50%/100%  fiexd #000;
}
avatar
文章
阅读
粉丝