CSS 基础个人笔记

公共样式

*{
 margin: 0;
 padding: 0;
}
html,body{
 width: 100%;
 height: 100%;
}
a{
 text-decoration: none;/*去除下划线*/
 color:#212121;
}
ul,ol{
 list-style-type: none;/*清除样式（li前点·）*/
}
em,i{
 font-style: normal;/*清除文字样式*/
}
input,button{
 border: none;/*去除外边框（点击前）*/
 outline:none;/*去除外边框（点击后）*/
}

快捷键

alt+shift+F：格式化(快速整理)

Normalize.css：不同浏览器的默认样式存在差异，可以使用 Normalize.css抹平这些差异。

• 保留有用的默认值，不同于许多 CSS 的重置

• 标准化的样式，适用范围广的元素。

• 纠正错误和常见的浏览器的不一致性。

• 一些细微的改进，提高了易用性。

• 使用详细的注释来解释代码。

W3school CSS 属性选择器详解：

https://www.w3school.com.cn/css/css_selector_attribute.asp

/*选取带有title属性的元素*/
[title]{}
​
/*选取带有title属性的p元素*/
p[title]{}
​
/*选取title属性值为important的元素*/
[title="important"]{}
​
/*选取title属性值包含important的元素*/
[title~="important"]{}
​
/*选取title属性值以important开头的元素 （该值必须是整个的单词）*/
[title|="important"]{}

子串匹配属性选择器：

/*选择href属性内以https开头的标签*/
[href^="https"]{}
/*选择href属性内含qq的标签*/
[href*="qq"]{}
/*选择href属性内以.com结尾的标签*/
[herf$=".com"]{}

清除浮动的方法

li{float:left;}

方法一：

ul::after{
 display:table;/* 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。*/
 content:"";
 clear:both;
}
隐藏
不占位隐藏
display:none;
占位隐藏(用在表格里就不占位)
visibility 属性规定元素是否可见。
提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
a{
 visibility:visible;/*默认值。元素是可见的*/
 visibility:hidden;/*元素是不可见的*/
 visibility:collapse;/*当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。*/
}
CSS background 属性
https://www.w3school.com.cn/cssref/pr_background.asp
 
  
 
   
 
    
值
 
    
描述
 
   
 
  
 
  
 
   
 
    
background-color
 
    
规定要使用的背景颜色。
 
   
 
   
 
    
background-position
 
    
规定背景图像的位置。
 
   
 
   
 
    
background-size
 
    
规定背景图片的尺寸。
 
   
 
   
 
    
background-repeat
 
    
规定如何重复背景图像。
 
   
 
   
 
    
background-origin
 
    
规定背景图片的定位区域。
 
   
 
   
 
    
background-clip
 
    
规定背景的绘制区域。
 
   
 
   
 
    
background-attachment
 
    
规定背景图像是否固定或者随着页面的其余部分滚动。
 
   
 
   
 
    
background-image
 
    
规定要使用的背景图像。
 
   
 
   
 
    
inherit
 
    
规定应该从父元素继承 background 属性的设置。
 
   
 
  
 
 
 
 
background-attachment
 
 
a{
   background-attachment: fixed;/*当页面的其余部分滚动时，背景图像不会移动。*/
   background-attachment: cover;/*默认值。背景图像会随着页面其余部分的滚动而移动。*/
}
 
 
background-position
 
 
需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作
 
 
a{
    background-repeat:no-repeat;/*背景图像将仅显示一次 其他repeat;repeat-x;repeat-y;*/
    background-attachment:fixed;
    background-position:center;/*居中*/
}
 
 
文字超出省略
 
 
/*一行*/
p{
    overflow: hidden;
    white-space: nowarp;
    text-overflow: ellipsis;
}
/*多行*/
p{
    overflow: hidden;
        display: -webkit-box;
    -webkit-line-clamp: 2;/*规定行数*/
        -webkit-box-orient: vertical;
}
 
 
line-clamp:限制在一个块元素显示的文本的行数。
 
 
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
 
 
为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
 
 
 
  
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
 
  
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
 
  
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
 
 
 
 
transform 属性向元素应用 2D 或 3D 转换。
 
 
该属性允许我们对元素进行旋转、缩放、移动或倾斜。