愿卿一路好风景

此心安处是吾乡

0%

CSS笔记

发表于 更新于

display:none 在不删除元素的情况下隐藏元素，不会占据原有空间

visibility:hidden 会占据原有的空间

使用max-width 替代width能够解决当窗口宽度小于元素的宽度时不会出现进度条的移动

box-sizing属性，无需考虑内外边距对盒子大小的影响,以下代码可以兼容

1
2
3
4
-webkit-box-sizing: border-box; //chrome safari
    -moz-box-sizing: border-box; //火狐
    box-sizing: border-box;

position属性

static: 不会被特殊定位

relative:在没有添加top/left/right/left属性的时候表现没有任何影响，添加了之后会在相对其正常位置上偏离。

fixed:固定定位，固定在窗口上，页面滚动的时候不会移动，top/left/right/left属性是相对于浏览器窗口而言的。

absolute ：top/left/right/left属性是相对于父元素的位置的，如果父元素的position属性为satic,则直接参考body的位置定位。

**float:**可用于定位图片位置。父元素设置浮动以后，子元素的内容会围绕着这个父元素，要解除这种围绕，可以在子元素上添加CSS属性clear:left/right/top/bottomn

inline-block

使用inline-block布局时，需注意：

要设置每一列的宽度；

vertical-align属性会影响到inline-block元素，需将值设置为top;

如果HTML源代码中元素有空格，那么列与列之间会产生空隙；

column-count 属性

将div元素中的文本划分成三列

1
2
3
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */

column-gap属性

规定列间的间隔为40像素

1
2
3
4
5
6
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

flex-box布局

设置div的flex:1 会得到剩余的宽度

flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

设置在容器上的6个属性

1
2
3
4
5
6
flex-direction （竖排还是横排）  row|row-reverse|column|column-reverse
flex-wrap (是否换行)  nowrap| wrap|wrap-reverse
flex-flow   flex-direction和flex-wrap的结合 row nowrap
justify-content (容器中的子元素在横轴上的对齐方式)  flex-start|flex-end|center|sapce-   between|space-around
align-items (容器的子元素在竖轴的对齐方式) felx-start|flex-end|center|stretch|baseline
align-content (多条轴线的对齐方式)  flex-start|flex-end|center|space-between|space-around

设置在容器子元素里的6个属性

1
2
3
4
5
6
7
order 定义子元素的排列顺序，数值越小，排列越靠前，默认为O
flex-grow 定义项目的放大比例，默认为0 
flex-shrink 定义项目的缩小比例
flex-basis 定义在分配多余空间之前，项目占据的主轴空间
flex属性  flex-grow flex-shrink flex-basis的缩写 
align-self 属性允许单个项目与其他项目有不一样的对齐方式，可覆盖align-items属性

font:16px/1.2 monospace; /* 字体大小/行高 字体 */

cursor: not-allowed;

当鼠标放在元素上方时显示红色警告符号，可表示禁用状态。

input的placeholder属性

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。例： placeholder=”Search ……”

Font Awesome图标

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> //引入
</head>
<body>
 
<i class="fa fa-car"></i> //一般和伪类一起使用
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>

去掉搜索框和按钮的默认边框outline: none;

1
2
3
4
.btn:focus,
  .input:focus{
    outline: none;
  }

input.focus()

使得鼠标自动聚焦在搜索框内

calc()函数

用在CSS中，可以直接计算属性值大小，例： width: calc(100% - 50px);　　background: hsl(100, calc(3 * 20%), 40%);

多类选择器

1
2
.user.login /* 匹配同时包含user和login的元素 */
.user .login{ /* 匹配含user下的含login的元素 */

background-size:cover;

把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉

input的required属性

required 属性规定必需在提交表单之前填写输入字段。

innerHTML和innerText的区别

innerHTML 显示的内容不包括标签，而innerText的内容包含标签。

transform

x是往右延申，-x是往左延申，y是往下延申，-y是往上延申

transform: translateX(10px/-10px);

transform: translateY(10px/-10px);

background-image: linear-gradient()

如果使用 background: -webkit-linear-gradient(to right,#FFB95E 15%,#FCA661 5%,#FCA362 5%,#FA8F66 25%,#F5736B 20%,#F35C70 30%); 效果如下

draggable属性

draggable 属性规定元素是否可拖动。

input 里的type属性：color

1
<input type="color" id="color">

显示如下：

1627139676834

margin-left：auto；

margin-left: auto ；可以使元素靠右

object-fit属性

指定元素的内容应该如何去适应指定容器宽度和高度

.progress { *animation: go-left-right 3s infinite alternate; }

把动画 “go-left-right” 应用到元素上

持续 3 秒

持续次数：infinite (无限)

每次都改变方向

表单中checked伪类

1
2
3
4
5
6
.toggle:checked + .label {
  background-color: #8e44ad;
}
//toggle为input的类名，利用label的for属性将label和input绑定，当input（type为checkbox）被选中时,设置label里面的元素的背景颜色。
可以将input隐藏起来，当点击label区域时，input会被自动选中，就会出现点击lable区域时背景颜色发生变化的效果，再次点击，input取消选择，背景颜色恢复原样。

内容超出容器后自动换行

1
2
3
4
5
6
7
8
white-space: pre; /* CSS2 */ 试过如果是英文不会自动换行
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */ 建议使用这个

skewX() skewY()属性

skewX(45deg)沿着X轴倾斜

input标签type为number时怎么去掉加减按钮

1
<input type="number">
1
2
3
4
5
6
7
8
9
10
11
12
/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none; 
    margin: 0; 
}
/* 火狐 */
input{
    -moz-appearance:textfield;
}

input的valid伪类

设置在输入框在正确的条件下的样式

例：

1
2
3
4
input:valid {
  border-color: #3498db;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}

CSS中bottom和margin-bottom的区别

1.bottom是指元素与定位元素的距离，而margin-bottom是指同级元素之间的距离。
2.增加margin-bottom的长度，元素整体的高度也会相应增加，在border-box模式中会减少。

input中type属性range

1
<input type="range" id="range" min="0" max="100">

1628088129883

::-webkit-slider-thumb

这是type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,该伪类只在内核为webkit/blink的浏览器中有效

使用方式

该伪类需要配和**::-webkit-slider-runnable-track**使用,否则会没有效果…….

1
2
3
4
5
6
7
8
9
10
11
12
13
input[type=range]::-webkit-slider-thumb{
   -webkit-appearance: none;/*清除默认样式*/
   height:7vw;/*设置滑块高度*/
   width:5vw;/*设置滑块宽度*/
   background:#000;/*设置背景色*/
   border-radius:10vw 10vw;/*加个圆角边*/
   margin-top:-1vw;/*使用position的话会导致滑块不滑动,但是绑定的value是改变的,所以这里使用margin-top去做定位*/
}
input[type=range]::-webkit-slider-runnable-track{
   border-radius: 30px; 
   background:#128;
   height:15px;
}

实现单行/多行文本溢出

单行文本溢出

可使用text-overflow实现，但是该属性有效的前提是设置了overflow: hidden和white-space:nowrap才能生效

1
2
3
4
text-overflow: ellipsis;
 white-space:nowrap;
 overflow:hidden;

多行文本溢出省略

1
2
3
4
5
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;//将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 2; //是用来限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical;//设置或检索伸缩盒对象的子元素的排列方式；

单词拆分

word-break: keep-all //当单词数量超过行宽时，会按照整个单词自动换行

而word-break: break-all //不按单词换行，而是按照字母拆分

字体引入

1
2
3
4
@font-face{
font-family:''
src:url('文件存放的位置') format('opentype')
}

设定format(‘opentype’)可以让浏览器在有该字体的时候就加载，没有的时候就不加载了，可以减少网络带宽

行高

行高单位不要用px,建议用响应式的如百分比、em 、rem，因为当字体大小发生变化的时候用px单位文本显示会错乱。

字母大小写

控制字母的大小写可以根据js来进行控制

1
2
3
4
const message = 'hello world'
console.log(message.toUpperCase()) //大写
console.log(message.toLowerCase()) //小写
console.log(message.slice(0,1).toUpperCase().concat(message.slice(1,))) //首字母大写

其实通过css来控制更为简单

1
2
text-transform: uppercase;
text-transform: capitalize;//首字母大写

表格间距

去掉表格单元格之间的间距

1
2
3
 td {
border-collapse:collapse;
}

列表前缀

ul > li 布局 

1
2
3
ul{
list-style-image:url('照片路径')这个可以用在网页布局中，那么居中就没这么困难了
}

或者可以使用背景图片

1
2
3
4
5
6
7
8
9
10
ul li{
background-image:url('');
background-repaet:no-repeat;
background-size: 10px 10px;
background-position: 0px 5px;
textp-indent:20px;
border-bottom:solid 1px #ddd;
margin-bottom:10px;
padding-bottom:5px;
}

透视

保持容器比例

1
aspect-radio:1/1

容器内容可编辑

1
contentditable=true