分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

继承盒模型以及CSS常用样式

发布时间:2023-09-06 01:24责任编辑:赖小花关键词:CSS

serif 衬线字体 serif

sans-serif 非衬线字体 sans serif

line-through 删除线 line-through
text-shadow : x y 模糊度 颜色 ??shadow ??

background-size:

background复合样式:#fff url() no-repeat scroll x,y ?

outline

sprite ???sprite

继承

继承(inherit)子元素会自动拥有父元素的某些CSS属性。

可被继承:文本类属性会被继承
不可被继承:外内边距,背景颜色
传递性

继承发生要满足两个条件:
该属性是可继承的属性
该属性在样式表中没有声明


强制继承

也叫显示继承,是指将css设置为inherit。
两个原因:为了继承不能继承的元素
为了继承已被声明过的属性

获得值的计算过程:无属性值—确定声明值—层叠冲突—使用继承—使用默认值—每个层都有值

background-color的默认值:transparent(透明)


盒模型

display:bolck/none/inline/inline-block

block:
占据所有可用的宽度
通常用于较大的内容块,比如标题或结构元素
独占一行
可设置高宽

inline:

只占据内容所需的宽度,在同行显示
通常用于较小的内容块
由内容撑开高宽

ps:行内元素不能嵌套块元素

inline-block:

input、img


盒模型

content—padding—border—margin


padding值不能为负

自动换行又叫断词

overflow:scroll/hidden

ps:父级尽量不设置高宽

顺时针方向显示像素值缩写

垂直方向外边距会合并,两值不同时取大值。
外边距可取值为负。


字体


font-family:“a”,“b”,serif/sans-serif; ?衬线字体和非衬线字体

ps:非衬线为主,衬线一般用于比较大的字上

font-style:obique/italic/normal ???默认强行切斜/设置为倾斜/正常


文本


text-indent:2em/px ?值可为负
text-decoration:none/underline/overline/line-through
没有/下划线/上划线/删除线
letter-spacing ?字距
word-spacing ?词距

顶线、中线、基线、底线

text-shadow:x y 模糊度 颜色 ???背景偏移量

背景/background

以视口为基准显示内容

background-attchment:fixed/scroll

background-size: px/%

background复合样式:#F00 url() no-repeat scroll x y;


边框/border

border:常用样式
outline:1、辅助用,不产生像素 2、去掉文本框蓝色线条

拼合图/雪碧图

sprite

定了视口再插入图片

继承盒模型以及CSS常用样式

原文地址:http://www.cnblogs.com/opacity-m/p/7822613.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved