前端开大语言三种: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的知识点相关推荐

  1. 【干货分享】前端面试知识点锦集02(CSS篇)——附答案

    二.CSS部分 1.解释一下CSS的盒子模型? 回答一: a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度 b.网页设计中常听的属性名:内容(content).填充(paddi ...

  2. css 小知识点:inline/inline-block/line-height

    inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...

  3. css就近原则_细品100道CSS知识点(上)「干货满满」

    作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录 细品100道CSS知识点(上)[干货满满]本篇 细品100道C ...

  4. 保姆级教程 CSS 知识点梳理大全,超详细!!!

    保姆级教程 CSS 知识点梳理大全,超详细!!! ✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍 ✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了 ✴️星光不负赶路人 ...

  5. 105道CSS 面试知识点总结

    来源 | https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部分主要是笔者在复习 ...

  6. CSS2:宽度与高度疑难点解析

    CSS2:宽度与高度 如果你的CSS代码里经常出现height和width属性,说明你对宽度与高度理解的不够深 1.文档流(Normal Flow) 翻译很烂,应该为普通流,或者常规流. 1.1DIV ...

  7. CSS(CSS3)知识点学习

    文章目录 一.CSS的发展历程 二.CSS网页的美容师 三.CSS初识 1.书写位置 (1)内部样式表(内嵌式) (2)内联样式(行内式) (3)外部样式表(外链式) (4)三种样式表总结 2.CSS ...

  8. HTML CSS笔记(没有基础内容,比如br标签是换行什么的),CSS2.1,CSS3,响应式布局

    每一个知识点都有相应的测试代码,你可以将代码复制到文件中,然后在浏览器中打开测试即可 推荐使用谷歌浏览器Chrome,因为都没有做hack浏览器兼容 文章目录 一.基础(HTML和CSS中较复杂内容) ...

  9. 【干货分享】前端面试知识点锦集01(HTML篇)——附答案

    一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层 分别是:HTML.CSS.JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与 ...

最新文章

  1. python中递归函数的实例_Python 递归函数详解及实例
  2. python的基础网络编程是下列_Python基础(六)网络编程
  3. jquery1.43源码分析之工具方法
  4. 箭头函数可被打印却不能调用_5种应该避免使用箭头函数的情况
  5. 每天一道LeetCode-----计算给定范围内所有数的与运算结果
  6. staruml透明_第05组 团队项目-需求分析报告
  7. html特殊字符(css3 content)
  8. 为了做服务注册迁移,我提前准备了这些东西,来看看对你有没有用!
  9. Java并发专题 带返回结果的批量任务执行 CompletionService ExecutorService.invokeAll(转)...
  10. Mongodb系列:初识Mongodb
  11. python是什么专业-python主要学什么?
  12. 百度长语音识别免费开放 大幅提升语音转写效率
  13. 拓端tecdat|R语言用Hessian-free 、Nelder-Mead优化方法对数据进行参数估计
  14. 微软应用商店_微软应用商店,居然藏着这8款神器?!
  15. 清华大学《走进心理学》2021春学堂在线参考答案
  16. jersey spring_教程–带有Jersey和Spring的Java REST API设计和实现
  17. lua源码分享适用脚本chiji游戏
  18. 企业数据仓库总线架构、总线矩阵笔记 (第三篇)
  19. Python学习笔记(十五):python 中的面向对象
  20. MySQL基本数据类型

热门文章

  1. [转]Messenger:使用消息的跨进程通信
  2. “电脑人才”是怎么炼成的
  3. tcp的发送端一个小包就能打破对端的delay_ack么?
  4. webpack4.x 模块化浅析-CommonJS 1
  5. SQLserver数据库反编译生成Hibernate实体类和映射文件
  6. sublime_text快捷键
  7. 『协议』XML-RPC 协议规格说明
  8. POJ1274 The Perfect Stall(二分图)
  9. iOS自动布局进阶用法
  10. codeblocks