关于一些html和css2的知识点
前端开大语言三种:1)HTML(hypertext markup language)结构2)css(Cascading Style Sheets)样式 3)js(Javascript)行为 脚本语言
属性:属性值 用来描述标签的一些特征的关键词
关于css样式的引入方式 一共有三种
1)行间样式表(写在标签的开始标记上)
2)内部样式 写在<style></style>标签之间
3)外部样式表 用<link>标签引入
关于盒模型的一些属性
overflow属性
属性值
visible 默认值,内容不会被修剪,会呈现在元素框之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪,则浏览器会显示滚动条,以便查看其余的内容.
inhert规定应该从父元素继承overflow属性值.
margin属性 外边距
margin是可以设置负值的
外边距:margin(也是一个复合属性)可以跟一个值,两个值,三个值,四个值
顺序是 margin-top,margin-right,margin-bottom,margin-left
关于margin有两个常见的问题
1.上下边距重叠问题
两个上下相邻的元素,如果上个元素设置了margin-bottom,下面的元素设置了margin-top,并不会将两个值加起来,而是取其中较大的
的值进行显示
2.当两个元素为父子关系时(嵌套),给子元素添加(margin-top)值得时候,该值会传递父级.
关于对这个问题的解决方案有五种
1)给父级添加overflow:hidden
2)给父级增加border:1px solid transparent(这是一个透明色);
3)给父级增加display:inline-block;
4)给父级position:absolute;
5)给父级增加padding-top:1px;
border边框的属性
border-style属性值:
none:定义无边框
hidden 与"none相同",不过用于表示除外,对于表hidden解决了边框冲突
dotted定义点状边框.在大多数浏览器中呈现为实线
dashed定义虚线.在大多数浏览器中呈现为实线
double定义为双线.双线的 宽度等于boder-width的值
groove定义3d凹槽边框吗,取决于boder-color
另外还有 ridge3d垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
关于文本的一些设置
font-size:字体大小 一般为偶数,单位px, em, rem
网页中颜色的设置
用英文单词作为属性值,也可以用rgb(),rgba()和十六进制色彩值表示
属性值
值 描述
xx-small
x-small
small
medium
large
x-large
xx-large
把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。
默认值:medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。
color设置文本的字体颜色
color_name 规定颜色值为颜色名称的颜色(比如 red)。
hex_number 规定颜色值为十六进制值的颜色(比如 #ff0000)。
rgb_number 规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。
inherit 规定应该从父元素继承颜色。
text-align文字对齐方式
left把文本排列在左边.默认值:由浏览器决定.
right 把文本排列到右边
center 把文本排列在中间
justify实现两端对齐的文本对齐文本效果
inherit规定应该从父元素继承 text-align属性值
font-weight文字着重
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细
text-decoration文本修饰
none 默认.定义标准的文本.
underline 定义文本下的线
overline定义文本的上的一条线
lin-through 定义穿过文本下的一条线
blink 思念故意闪烁的文本
inherit规定应该懂父元素继承text-decoration属性的值
word-spacing单词间距(有空格为解析单位)
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit 规定应该从父元素继承 word-spacing 属性的值。
letter-spacing 字符间距
font-family字体(通常中文默认是宋体)
line-height行高
text-indent首行缩进(em缩进字符)
font-style 文字样式
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
转载于:https://www.cnblogs.com/mdw521forever/p/6216743.html
关于一些html和css2的知识点相关推荐
- 【干货分享】前端面试知识点锦集02(CSS篇)——附答案
二.CSS部分 1.解释一下CSS的盒子模型? 回答一: a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度 b.网页设计中常听的属性名:内容(content).填充(paddi ...
- css 小知识点:inline/inline-block/line-height
inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...
- css就近原则_细品100道CSS知识点(上)「干货满满」
作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录 细品100道CSS知识点(上)[干货满满]本篇 细品100道C ...
- 保姆级教程 CSS 知识点梳理大全,超详细!!!
保姆级教程 CSS 知识点梳理大全,超详细!!! ✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍 ✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了 ✴️星光不负赶路人 ...
- 105道CSS 面试知识点总结
来源 | https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部分主要是笔者在复习 ...
- CSS2:宽度与高度疑难点解析
CSS2:宽度与高度 如果你的CSS代码里经常出现height和width属性,说明你对宽度与高度理解的不够深 1.文档流(Normal Flow) 翻译很烂,应该为普通流,或者常规流. 1.1DIV ...
- CSS(CSS3)知识点学习
文章目录 一.CSS的发展历程 二.CSS网页的美容师 三.CSS初识 1.书写位置 (1)内部样式表(内嵌式) (2)内联样式(行内式) (3)外部样式表(外链式) (4)三种样式表总结 2.CSS ...
- HTML CSS笔记(没有基础内容,比如br标签是换行什么的),CSS2.1,CSS3,响应式布局
每一个知识点都有相应的测试代码,你可以将代码复制到文件中,然后在浏览器中打开测试即可 推荐使用谷歌浏览器Chrome,因为都没有做hack浏览器兼容 文章目录 一.基础(HTML和CSS中较复杂内容) ...
- 【干货分享】前端面试知识点锦集01(HTML篇)——附答案
一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层 分别是:HTML.CSS.JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与 ...
最新文章
- python中递归函数的实例_Python 递归函数详解及实例
- python的基础网络编程是下列_Python基础(六)网络编程
- jquery1.43源码分析之工具方法
- 箭头函数可被打印却不能调用_5种应该避免使用箭头函数的情况
- 每天一道LeetCode-----计算给定范围内所有数的与运算结果
- staruml透明_第05组 团队项目-需求分析报告
- html特殊字符(css3 content)
- 为了做服务注册迁移,我提前准备了这些东西,来看看对你有没有用!
- Java并发专题 带返回结果的批量任务执行 CompletionService ExecutorService.invokeAll(转)...
- Mongodb系列:初识Mongodb
- python是什么专业-python主要学什么?
- 百度长语音识别免费开放 大幅提升语音转写效率
- 拓端tecdat|R语言用Hessian-free 、Nelder-Mead优化方法对数据进行参数估计
- 微软应用商店_微软应用商店,居然藏着这8款神器?!
- 清华大学《走进心理学》2021春学堂在线参考答案
- jersey spring_教程–带有Jersey和Spring的Java REST API设计和实现
- lua源码分享适用脚本chiji游戏
- 企业数据仓库总线架构、总线矩阵笔记 (第三篇)
- Python学习笔记(十五):python 中的面向对象
- MySQL基本数据类型