阅读 175

CSS基础知识小结

  1. <a> 标签:在标签中可嵌套除他自己以外的任何元素。
  • terget属性:_self:在当前页面打开超链接;_blank在新的页面中打开超链接。
  • 将href属性值设为#,点击后可跳转到页面顶部。
  • 将href属性值设为‘# 目标元素的id属性’,点击后可跳转到页面指定位置。
  1. <img>属于替换元素(介于块元素与行内元素之间)
  2. 使用css的方式:
  • 内联(行内)样式(不推荐)
  • 内部样式表:<style>...</style>
  • 外部样式表(开发中常用)<link rel="stylesheet" href="...">
  1. 选择器
  • 通配选择器:*{...}选中页面中所有元素。
  • 复合选择器:如div.red{...}
  • 关系选择器:子元素选择器(父元素>子元素),后代元素选择器(祖先 后代),兄弟元素选择器(选择下一个兄弟:前一个 + 下一个;选择以下所有兄弟:前一个 ~ 后面所选兄弟)
  • 属性选择器:p[属性名]{...}p[属性名=属性值]{...}p[属性名^=属性值]{...}(指定值开头的元素)、p[属性名$=属性值]{...}(指定值结尾的元素)、p[属性名*=属性值]{...}(含有指定值的元素)
  • 伪类选择器:伪类用来描述一个元素的特殊状态。一般以:开头。
  • 权重:内联样式(1000) > id选择器(100) > 类和伪类选择器(10) > 元素选择器或伪元素(1) > 通配选择器(0) > 继承样式(无优先级);进行比较时,将所有选择器优先级相加(不进位)进行比较。
  • !import能使样式优先级最高,但是慎用
  1. 伪类:
  • li : first-child , li : last-child , li : nth-child (在所有元素中进行排序)
  • li : first-of-type , li : last-of-type , li : nth-of-type (在同类型元素中进行排序)
  • 超链接伪类:a : link(未访问)a : visited(已访问)a : hover(悬停)a : active(点击)
  1. 伪元素:一般以: :开头,表示并不存在的元素。
  • :before/:after 元素的开始或最后,需结合content属性使用,如
div::before{
    content:...;
}
复制代码
  1. 颜色

可以用两种方式表示:

  • RGB(RGBA表示不透明度)
  • HSL(色相,饱和度,亮度)
  1. 元素状态
  • 在文档流中:1、块元素:在页面中独占一行,默认宽度是父元素的全部,默认高度被内容撑开。2、行内元素:不独占一行,只占自身大小,在页面中自左向右排列,一行容纳不下换第二行,默认宽度和高度都被内容撑开。
  • 不在文档流中
  1. 布局

(1)水平方向

  • margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区宽度。
  • 若上式相加不成立时,称为过渡约束
  • 若以上七个值中没有auto,且相加等式不成立,浏览器会自动调整margin-right使其满足等式
  • 若以上七个值中width,margin-left,margin-right这三个值某个为auto,且相加等式不成立,浏览器自动调整auto的值:1 、三个值中将宽度和一个外边距设为auto,则宽度会被调整为最大,设为auto的外边距会变为0;2、三个值都设为auto,则外边距为0,宽度最大;3、三个值中将两个外边距设为auto,宽度固定,则会将外边距调整为相同值

(2)垂直方向

  • 父元素未设置高度时,会被子元素撑开;
  • 父元素设置高度时,高度固定,不随子元素变化。若子元素大小超过父元素则会从父元素溢出;
  • 使用overflow属性设置父元素如何处理溢出部分:visible、hidden、scroll、auto、overflow-x、overflow-y;
  1. 盒模型

(1)外边距的折叠:垂直方向的相邻外边距会发生折叠。

  • 在兄弟元素中,若外边距均为正,则取最大值;若均为负,取绝对值最大的;若为一正一负,取两者和;
  • 在父子元素中,父子元素相邻外边距,子元素会传递给父元素(上外边距);

(2)display属性:设置元素显示类型

  • inline行内元素
  • block块元素
  • inline-block行内块元素(既可以设置高度宽度,又不独占一行
  • table表格
  • none不显示

(3)visibility属性:设置元素显示状态

  • visible默认值,元素正常显示
  • hidden隐藏,但仍占据位置

(4)浏览器默认样式(通常情况下需要去掉默认样式)

*{
    margin:0;
    padding:0;
}
复制代码

或者使用重置样式表reset.css/normalize.css

(5)box-sizing属性:

  • content-box:默认值,width和height是设置内容区的大小
  • border-box:width和height是设置整个盒子可见框大小

(6)box-shadow:设置阴影,不会影响页面布局。

box-shadow: xxpx(水平偏移)  xxpx(竖直偏移) xxpx(模糊半径) color(颜色);
复制代码

(7)border-radius:设置圆角。

  • 4个值时:左上 右上 右下 左下
  • 3个值时:左上 右上/左下 右下
  • 2个值时:左上/右下 右上/左下
  • 设为50%时,为圆形
  1. 浮动:浮动元素不会盖住文字,文字会自动环绕在浮动元素周围。

元素设置浮动后,水平布局的等式便不需要强制成立,并从文档流中脱离,不再占用文档流中的位置,默认情况下不会移出父元素。

  • none(默认)
  • left
  • right

脱离文档流的特点:(不再区分块元素与行内元素

  • 块元素:块元素不再独占页面的一行,高度和宽度默认被内容撑开
  • 行内元素:变成块元素,可设置宽高,特点与块元素一样
  1. BFC(block formatting context)块级格式化环境:解决高度坍塌问题。BFC是CSS中隐含的一个属性,开启BFC该元素会变成一个独立的布局区域。

开启BFC后的特点:

  • 开启BFC后的元素不会被浮动元素覆盖;
  • 开启BFC后的元素子元素和父元素外边距不会重叠;
  • 开启BFC后的元素可以包含浮动的子元素;

开启元素BFC的方式:

  • 设置元素的浮动(不推荐)
  • 设为行内块元素(不推荐)
  • 将元素的overflow设为一个非visible值,如overflow:hidden/auto

高度坍塌最终解决方案:使用::after伪元素,如

box1::after{
    content: ' ';
    display: block;
    clear:both;
}
复制代码

同时解决高度坍塌与外边距重叠问题:

.clearfix::before,
.clearfix::after{
    content: ' ';
    display: table;
    clear:both;
}
复制代码

clear:清除浮动元素对当前元素的影响:left、right、both(清除两侧中影响较大的一侧)

  1. 定位:通过定位可将元素摆放到页面任意位置。开启定位后需要设置元素偏移量来设置元素位置(top\bottom\right\left)
  • static(默认值)
  • relative(相对定位)

(1)开启相对定位后没设置偏移量不会发生变化
(2)相对定位是参照于元素在文档流中的位置
(3)相对定位会提升元素层级
(4)相对定位不会使元素脱离文档流,不会改变元素性质

  • absolute(绝对定位)

(1)开启绝对定位后没设置偏移量不会发生变化
(2)元素会从文档流中脱离,会改变元素性质
(3)绝对定位会提升元素层级
(4)绝对定位是相对于其包含块进行定位的(包含块containing block:在正常情况下,包含块就是离当前元素最近的祖先块元素;绝对定位里的包含块就是离他最近的开启定位的祖先元素,如果所有祖先元素都没开启定位,则根元素就是它的包含块)
(5)开启绝对定位后,水平方向布局等式需要加上left和right,增加到9个值,当发生过渡约束时,若9个值中没有auto则自动调整right值使等式成立。可设为auto的值:margin,right,left,width。left和right默认值是auto。
(6)垂直方向布局也要加上top和bottom。
(7)要使元素在包含块中/页面中水平垂直均居中,可使 margin:0; left:0; right:0; top:0; bottom:0;

  • fixed(固定定位)

也是一种绝对定位,绝大部分特点和绝对定位一样,唯一不同的是固定定位永远参照于浏览器的视口进行定位。

  • sticky(粘滞定位)

和相对定位特点基本一致,不同的是粘滞定位可以使元素到某个位置时将其固定,但兼容性不好。

  1. 字体族

font-family:可选值有5个,分别表示大的字体分类,而不是字体样式。

  • serif(衬线字体)
  • sans-serif(非衬线字体)
  • monospace(等宽字体)
  • cursive(草书字体)
  • fantasy(虚幻字体)

font-face:可将服务器中的字体直接提供给用户去使用(存在版权问题)

@font-face{
    font-family:'自定义字体名';
    src:url('路径')format('truetype');
}
复制代码
  1. 图标字体(iconfont)

(1)fontawesome使用步骤:

捕获.PNG

  • 将all.css通过<link>引入到网页中
  • 使用图标字体:查阅zeal中的fontawesome,只有fas和fab是免费的。如<span class="fas fa-bell"></span>或者<span class=""fas/fab>&#x图标编码</span>

(2)给列表图标指定样式(通过伪元素),如:

li::before{
    content:'\f1b0';                     /*图标编码前加一个反斜杠*/
    font-family:'Font Awesome 5 Free';   /*打开all.css查找@font-face的fas或fab*/
    font-weight:900;                     /*打开all.css查找@font-face的fas或fab*/
}
复制代码

(3)也可以使用阿里的矢量图标库www.iconfont.cn/ ,图标较多,但使用需要下载。

  1. 行高line-height:指文字占有的实际高度。
  • 将行高设置为和高度一样的值能使单行文字在一个元素中垂直居中
  • 行高经常用来设置文字的行间距,行间距=行高-字体大小
  1. 处理网页空白:white-space
  • normal默认值
  • nowrap不换行
  • pre保留空白(空格,换行)
.box1{
    width:200px;
    white-space:nowrap;       /*不换行*/
    overflow:hidden;          /*使溢出部分隐藏*/ 
    text-overflow:ellipsis;  /*使溢出的文字显示为省略号*/
}
复制代码
  1. 雪碧图

(1)解决图片切换时闪烁问题:将多个小图片统一保存到一个大图片中,然后通过调整background-position来显示相应的图片,这样图片会同时加载到网页中有效避免闪烁问题,这个技术称为css-sprite,这种图称为雪碧图
(2)雪碧图使用步骤:

  • 确定要使用的图标
  • 测量图标大小
  • 根据测量结果创建一个元素
  • 将雪碧图设为元素的背景图片(background-image)
  • 设置一个偏移量以显示正确图片(background-position)

(3)雪碧图特点: 一次性将多个图片加载进网页,降低请求次数,加快访问速度,提升用户体验。
19. 居中方式:
适用于元素大小确定的居中方式

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0;
复制代码

适用于元素大小不确定的居中方式

left:50%
top:50%
transform:translateX(-50%) translateY(-50%);
复制代码
文章分类
前端
文章标签