css知识点笔记-常见特性

简介: css知识点笔记-常见特性

css知识点范围:常见特性

  • 颜色值缩写:#000000=#000,#336699=#369两两重复就能缩写;
  • 字体缩写:只要缩写必须要有size和family这两个属性,font-size和line-height缩写时中间加入"/",属性包括font-style/variant/weight/size/family和line-height;
  • 颜色:rgb(a, b, c)。a,b,c可以是0-255之间的整数,也可以为0%-100%的百分数;
  • 行内元素居中用text-align : center
  • 定宽块状元素居中方法:width固定,margin的左右值设置为auto;
  • 宽度有自适应特性,根据里面的最长元素定宽;
  • 不定款块状元素居中方法:外层加个table标签,块级元素设置为display  : inline行内元素,上层lable用float : left, position : relative, left :  50%,下层原块级元素用position : relative, left : -50%;
  • 隐性改变display类型:当设置为position : absolute或float : left是,元素会变为inline-block类型;
  • 高度确定下才可以设置垂直居中;
  • 单行元素垂直居中方法:可以设height和line-height相等;
  • 垂直居中方法1:外层加入table、tbody、tr、td,设td高度固定,再设置vertical-align : middle就可以了,因为在table里,后者的属性默认已经被隐式的设置好了;
  • 垂直居中方法2:设置块级元素display为table-cell,再加上vertical-align : middle就可以了。缺点是兼容性不好;
  • css注释:/* */ ,html注释:<!-- -->
  • 透明背景设置方法1:设置opacity(0.x),内部元素也会跟着变透明;
  • 透明背景设置方法2:rgba(255, 255, 255, 0.x),最后的参数就是设置透明度的,这个只是背景层透明,不会影响内部元素;
  • webkit内核浏览器画圆:-webkit-border-radius : 50%
  • 火狐浏览器画圆:-moz-border-radius : 50%
  • 华文细黑字体:Verdana
  • <font>括起来设置font的属性,可以直接改字体样式;


目录
相关文章
|
3月前
|
机器学习/深度学习 前端开发 JavaScript
|
5月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
63 1
|
4月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
276 91
|
2月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
42 1
[HTML、CSS]知识点
|
3月前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
3月前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
2月前
|
前端开发
css特性
css特性 1.继承性:子级继承父级文字控制属性 ps:子级拥有自己的样式则不会继承父级。 2.层叠性:相同的属性后面覆盖前面,不同的属性叠加 3.优先级:选择器优先级高的样式生效 公式:通配符<标签<类<id<行内样式<!important(选中范围越大,优先级越低) 叠加计算规则:存在复合选择器时,从左向右依次比较个数,同一级个数多的优先级高,如果个数相同,则向后比较;!important权重最高;继承权重最低。
|
3月前
|
前端开发 容器
CSS弹性盒子知识点
CSS弹性盒子知识点
|
4月前
|
Web App开发 前端开发 JavaScript
「offer来了」1张思维导图,6大知识板块,带你梳理面试中CSS的知识点!
该文章通过一张思维导图和六大知识板块系统梳理了前端面试中涉及的CSS核心知识点,包括CSS框架、基础样式问题、布局技巧、动画处理、浏览器兼容性及性能优化等方面的内容。
|
5月前
|
前端开发 JavaScript API
Vue 3 新特性:在 Composition API 中使用 CSS Modules
Vue 3 新特性:在 Composition API 中使用 CSS Modules