阅读 101
【青训营】css基础

【青训营】css基础

浮动

浮动的一些特性

  • 浮动元素可以向左或向右移动,直到它的外边缘碰到包含父元素或另一个浮动元素的边框为止
  • 浮动元素不在文档流中,所以下面的非浮动元素会填补到浮动元素下方(浮动元素提升层级)
  • 内联元素也可以浮动,并且可以设置其宽高

浮动引起的一些问题

  • 问题一:父元素的高度无法被撑开
  • 问题二:与浮动元素同级的非浮动元素会填补到浮动元素下方(遮盖现象)

问题一的一些解决方法

  1. 为父元素设置固定高度
  2. 为父元素设置 overflow:hidden
  3. 添加伪元素,可以给父元素添加after伪类(可以给所有浮动元素追加通用类clearfix清除浮动)
.clearfix::after{
    content:"";
    display:block;
    clear:both;
}
复制代码

问题二的一些解决方法

  1. 在父元素内部,浮动元素的最后面,添加一道“墙”,设置属性clear:both
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear">我叫墙</div>
</div>
复制代码
.container{
    width:100%;
    border:2px solid #000000;
}
.left{
    width:100px;
    height:100px;
    background-color:rgb(52,128,250);
    float:left;
}
.right{
    width:100px;
    height:100px;
    background-color:rgb(52,128,250);
    float:left;
}
.clear{
    clear:both;
}
复制代码

定位position

几种定位方式

  • static:默认值,即没有定位
  • relative:相对定位,相对本身所在正常文档流的位置(即未移动时的位置)进行定位
  • absolute:绝对定位,相对最近一级(父元素)定位(从直接父元素向上,直到根元素)进行定位
  • fixed:固定定位,相对于浏览器可视区进行定位
  • sticky:粘性定位,可以认为是相对定位和固定定位的结合,结合实例感受(需要自己拖动滚动条尝试,与relative比较)
<div class="prev">prev</div>
<div class="container"></div>
<div class="next">next</div>
复制代码
.prev{
    width:100px;
    height:100px;
    background-color:yellow;
}
.container1{
    position:sticky;
    border:2px solid black;
    width:300px;
    height:300px;
    top:40px;
}
.next{
    width:100px;
    height:2000px;
    background-color:yellow;
}
复制代码

position和float异同

均可对内联元素设置float和absolute,可以让元素脱离文档流,可以设置其宽高

位于非浮动元素之后的浮动元素碰到该非浮动元素的边框为止,不会覆盖该浮动元素(这里有点绕。。);而对于absolute,当设置top、left...可能会覆盖上面的元素。

来个例子,下面当给next类加上float:left时,类名为next盒子碰到container边框就停止了。而当给next类加上position:absolute;top:300px;时,类名为next盒子覆盖在container盒子上面。

<div class="prev">prev</div>
<div class="container"></div>
<div class="next">next</div>
复制代码
.prev{
    width:100px;
    height:100px;
    background-color:yellow;
    float:left;
}
.container{
    border:2px solid black;
    width:300px;
    height:300px;
    /*float:left*/
    /*position:absolute;top:300px;*/
}
.next{
    width:100px;
    height:100px;
    background-color:yellow;
}
复制代码

块级元素与行内元素

一些块级标签

div、h1-h6、p、ol、ul、li、dl、table、br、form等。换行显示、可设宽高、可套行和块。

一些行内属性的标签

span、a、em、strong、select、option、img、input、textarea等。行内显示、只能套用行标签(还有一些特殊的行标签也不能套用)、不可设宽高(其中img、input、textarea例外,可设宽高)。

关于display

display的一些值

  • block:块类型,默认宽度为父元素宽度,可设宽高,换行显示
  • inline:行内元素,默认宽高为内容宽度,不可设宽高,同行显示
  • inline-block:行内块级元素,默认宽高为内容宽度,可设宽高,同行显示
  • none:元素不会显示,脱离文档流
  • inherit:从父元素继承display属性的值

display:none与visibility:hidden

  • display:none 隐藏对应的元素,脱离文档流(即在文档流中不在给它分配空间,它周围的元素会合拢)
  • visibility:hidden 隐藏对应的元素,但是在文档流中仍然保留原来的空间

css中一些可继承与不可继承的样式

  • 可继承:font-size、font-family、color
  • 不可继承:border、padding、margin、width、height

与字体有关的可以继承,与尺寸相关的通常不能继承

css优先级

!important > style(内联) > id(权重100) > class(权重10) > 标签、伪类(权重1) > *

选择器组合使用的一些加减法

经常用到的居中

给定宽高

.father{
    position:relative;
    width:100%;
    height:100%;
}
.son{
    position:absolute;
    width:100px;
    height:100px;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}
/*更多...*/
复制代码

未给宽高

.father{
    position:relative;
    width:100%;
    height:100%;
}
.son{
    position:absolute;
    width:100px;
    height:100px;
    top:50%;
    left:50%;
    transform:tanslate(-50%,-50%);
}
/*更多...*/
复制代码

字体居中

垂直:line-height
水平:text-align:center;letter-spacing

听UI课的一些收获

课程老师推荐的一本设计书,有时间看看《写给大家看的设计书》

一些关键词:层级、主题色、一致性

  • 对比:如果两个元素内涵不同,请让它们截然不同
  • 重复:设计的视觉要素应该在整个作品中重复出现
  • 亲密性:彼此关联的元素应当放置在一起
  • 对齐:任何元素都不能随意安放,应当总与另外至少一个元素有视觉上的关联
  • 层级:亲密性+对比的目标,让用户抓重点、切视线
  • 一致性:对齐+重复,克制用户视线所感受到的尺度,迅速与网站设计语言建立熟悉感

这里先'盗'一些图,原创传送门:juejin.cn/post/699656…

image.png

image.png

image.png

image.png

文章分类
阅读
文章标签