CSS常用属性理解

简介: CSS常用属性理解

       提起css属性,我们自然会想到,它是指用户在HTML文档选择器中用来描述如何呈现特定元素的特性。那么它具有哪些常见属性呢?常见属性的定义是什么样的呢?又在实际使用中会遇到什么问题呢?面试常见的问题有哪些呢?让我们一一揭开这些常用属性的面纱吧!!!


一、常用属性有哪些?


       1、字体属性(font-*)


       2、颜色和背景属性(color、background-*)


       3、文本属性(文字对齐、行高等)


       4、边距属性(内外边距、边框等)


       5、布局属性(定位等)


       6、鼠标属性(cursor)


       以上这些属性都可以使用内部样式(style标签)、外部样式(link标签)和内联样式(元素属性)三种方式引入使用;


6ebca8a084ee43faa974da053a9dd695.png


b32cbbe7e78a4cc1964009aefe089578.png


01edf942d05f4a968aaf639371d90f13.png


二、常见属性的定义是什么样?


       1、字体类


font-family :设置字体样式

font-size :设置字体大小

font-weight : 设置字体粗细

font-style:设置字体样式

color :设置字体颜色

       2、颜色和背景类


color:设置字体颜色

background-color :背景颜色

background-image :背景图片

background-repeat:背景的重复方式

background-position:背景图片定位,属性值可以为数值,可以为百分比,也可以为关键字;第一个为水平方向,第二个为垂直方向

background-size:设置背景尺寸

background: 背景颜色 背景图片 背景定位 背景重复显示方式


background: #ccc url(./src/1.png) 200px 10px no-repeat;


       3、文本类


text-align:设置文本对齐方式

text-decoration:设置文本装饰方式

line-height :设置文本行高

text-indent:设置文本缩进

       4、边距类


margin-left:对象左边外延边距

margin-right:对象右边外延边距

margin—top:对象上边外延边距

margin-bottom:对象下边外延边距

padding-left:对象左边外延边距

padding-right:对象右边外延边距

padding—top:对象上边外延边距

padding-bottom:对象下边外延边距

border-width :边框粗细

border-style :边框样式 dashed :虚线 solid:实线

border-color : 边框颜色

border: 边框设置简写 边框粗细 边框样式 边框颜色


border: 1px solid #ccc;


       5、布局类


float:浮动布局

position:定位布局

flex:弹性布局

gird:网格布局

       6、鼠标类


pointer:小手

move:移动图标

text:文字选择器

crosshair:十字架

wait:等待

help:帮助

三、常用属性的实际用法?


       常用font设置字体的大小、粗细、颜色、字体类型等;需要注意的是,font本身受根元素的font大小影响,浏览器的根font-size大小是最小font;


ef5fe974caaa4d9082e0f8ad1b32e1ce.png

68a30f472b6442728e9eaaf97c5044e7.png


四、面试常见的问题有哪些?


       1、说说你对盒子模型的理解?


       2、box-sizing属性


       3、css选择器有哪些?优先级?哪些属性可以继承?


       4、说说em/px/rem/vh/vw区别?


       5、css中,有哪些方式可以隐藏页面元素?区别?


       6、谈谈你对BFC的理解?


       7、元素水平垂直居中的方法有哪些?


相关文章
|
2天前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
1月前
|
前端开发
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果,包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如,使用`blur(10px)`可使图像产生模糊效果,包裹层设置`overflow: hidden`可避免边缘模糊;`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度;`grayscale(1)`将图像转为灰度;`invert(1)`实现图像颜色完全反转;`opacity(0.5)`调整图像半透明;`saturate(350%)`增加饱和度;`sepia(100%)`营造复古深褐色调;`hue-rotate(180deg)`改变
28 4
CSS常用滤镜属性讲解
|
1月前
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性,用于3D转换时控制元素背面的可见性,以优化渲染性能。默认情况下,背面被隐藏以减少不必要的渲染。此属性有两值:`visible` 表示背面可见;`hidden`(默认值)则隐藏背面。 通过双面卡片案例演示了其用法:两个重叠盒子,一个显示图片,另一个显示文字且初始状态为背面朝外。鼠标悬停时,图片盒子翻转显示背面,文字盒子翻转显示正面,同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好,广泛支持现代浏览器。
30 2
了解 css中 backface-visibility 属性
|
23天前
|
前端开发 算法 开发者
CSS 的了解text-rendering属性
【8月更文挑战第24天】
|
28天前
|
前端开发 搜索推荐 UED
浅谈css的cusor属性
浅谈css的cusor属性
30 1
|
29天前
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
|
1月前
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力?带你彻底理解粘性定位的奇妙世界!
【8月更文挑战第20天】在前端开发中,CSS的粘性定位(`position: sticky`)是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位,达到指定阈值时转为固定定位,非常适合制作“吸顶”导航栏等。例如,设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏,还可应用于侧边栏等,增强布局灵活性与用户体验。尽管如此,仍需注意不同浏览器间的兼容性和可能的布局冲突。
40 0
|
2月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
23 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
1月前
|
前端开发 UED 开发者
使用 CSS 的 line-height 属性来提高可读性
使用 CSS 的 line-height 属性来提高可读性
16 0
|
1月前
|
前端开发
了解 css中 backface-visibility 属性
了解 css中 backface-visibility 属性
31 0