CSS面试须知--样式属性

最新推荐文章于 2024-09-28 15:35:33 发布

ヅLucky_triplex

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量106

点赞数

分类专栏： web前端知识点总结文章标签： css

本文链接：https://blog.csdn.net/kxdhshlg/article/details/118059097

版权

web前端知识点总结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

属性书写顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

字体样式

font字体

font-size:大小

谷歌浏览器默认的文字大小为16px

@ 扩展：有哪些单位
px em rem vh(100vh是整个屏幕高度) vw （100vw是整个屏幕宽度）

px，绝对长度单位，像素px是相对于显示器屏幕分辨率来说的
em，相对长度单位，em的值并不是固定的, em会继承父级元素的字体大小（参考物是父元素的font-size）,
em中所有的字体都是相对于父元素的大小决定的
rem ，相对于html根元素的font-size (rem=页面元素的值/font-size)
rem的缺点：文字类网站，如果用rem，那么屏幕越小的移动设备文字就越小，就会导致看文章的时候特别费劲。

font-family:字体

在网页的字体图标中经常使用

font-weight:字体粗细

400 等同于 normal，而 700 等同于 bold

font-style:字体风格

normal 不斜体， italic 斜体

font:综合设置字体样式 (重点)

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

外观属性

color:文本颜色

rgb(255,255,255);    or      #f13456；    or     red;

text-align:文本水平对齐方式

盒子里的内容居中：text-align: center;

line-height:行间距

行高等于高度文字垂直居中
行高大于高度文字偏下
行高小于高度文字偏上

text-indent:首行缩进

建议使用em作为设置单位

text-decoration 文本的装饰

text-decoration ：none; // 取消下划线

背景

背景颜色(color)

background-color:颜色值; 默认的值是 transparent 透明的

背景图片(image）

background-image : none | url (url)

背景平铺（repeat）

background-repeat : repeat | no-repeat | repeat-x | repeat

背景位置(position) 重点（精灵图）

background-position : center （方位词)
background-position : (百分数 %或由浮点数字和单位标识符组成的长度值)

必须先指定background-image属性
position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着

background-attachment : scroll | fixed

背景简写

background: transparent url(image.jpg) repeat-y scroll center top ;

背景透明(CSS3)

background: rgba(0, 0, 0, 0.3);

CSS3样式详见 CSS3新增样式

用户界面样式

鼠标样式

<ul>
  <li style="cursor:default">我是 小白</li>
  <li style="cursor:pointer">我是 小手</li>
  <li style="cursor:move">我是 移动</li>
  <li style="cursor:text">我是 文本</li>
  <li style="cursor:not-allowed">我是 文本</li>
</ul>

轮廓线（一般要取消）

outline: 0;   或者  outline: none;

防止拖拽文本域resize

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

详见 Vertical-align

溢出文字省略号显示

显示一行还是多行

white-space:normal ；默认处理方式
white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

text-overflow 文字溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 

text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

溢出隐藏 overflow 溢出(重点)
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
实际开发场景：
1.清除浮动
2.隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

三步实现

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

显示与隐藏