html/css学习笔记（一）

    =============================================================================================盒子模型1.background 1.1background-colorbackground-image: url("");background-repeatbackground-size: （x轴的比例 y轴的比例）background-positionbackground-attachment:fixed;(背景图固定不滚动)1.2 复合写法background: color iamge position repeat;2.border2.1复合写法border: border-width border-style border-color;2.2边框圆角border-radius3.paddingpadding：20px 10px;  上下边距:20px 左右边距：10pxpadding: 20px 30px 4px; 上  左右 下padding：10px 20px 30px 40px; 上 右 下 左4.margin4.1写法和padding类似4.2注意a.子级margin-top特定情况下会穿透父级规避方法:   1.给父级加边框2.给父级加voerflow:hidden;3.将margin-top用父级padding-top替代。b.兄弟关系的margin-top和margin-bottom会叠压5.文本设置font-size 文字大小font-family  字体color  文字颜色line-height 文字行高text-align 文本对齐方式text-indent:（像素/em）;首行缩进font-weight 文字着重 (normal bold bolder)font-style 文字倾斜(normal italic oblique(斜体) )font-decoration 文本修饰 (none underline line-through)letter-spacing 字母间距(px)word-space 单词间距(以空格为解析单位)小结A.盒子模型 url("./img/盒子模型.jpg");B.常见复合属性background: background-color background-iamge background-position background-repeatborder: border-width border-style border-colorpadding: 上 右 下 左margin: 上右 下 左font: font-style font-weight font-size/line-height font-family;=============================================================================================标签1.常见的标签title标签 双标签语义：网页标题 权重最大div标签双标签语义：无意义h标签双标签语义：标题默认样式：font-size font-weight margin h1权重最大 h2次之p标签双标签语义：段落默认样式： marginp标签再嵌套不要包含块元素的标签ul标签语义：无序列表默认样式：margin padding-left list-style-typeli标签语义：列表项默认样式：list-style-type;ol标签语义：有序列表默认样式：同uldl标签字典标签语义：自定义列表默认样式：无dt标签语义：列表标题默认样式：无dd标签语义：列表说明默认样式：margin-left小结快属性标签的特性：1.默认父级100%的宽2.支持所有css样式3.独占一行=============================================================================================内联属性的标签内链属性标签特性：1.同属性的标签排在一排2.内容撑开宽度3.不支持宽高，不支持上下的padding和margin4.代码换行被解析 间距的大小取决于父级的font-size的大小span标签语义：无意义strong标签语义：强调(加粗) 默认样式：font-weight 权重比较高em标签 语义：强调(斜体) 默认样式：font-style 权重比较高a标签语义：超链接默认样式：color text-decoration cursor；注：target="_self"(默认)当前页打开 target="_blank"新窗口打开herf属性：1.如果要连接网址，一定要加http://2.#代表连接到当前页面内联块属性标签特性：1.同属性的标签排在一排2.内容撑开宽度3.支持所有css的样式4.代码换行被解析 间距大小取决于父级的font-size大小img标签单标签语义：图片默认样式：低版本浏览器中有默认边框小结标签类型的转换显示为无：display：none;块属性： display：block;内链属性内联：display：inline;内联块：display：inline-block;=============================================================================================浮动的样式和特性浮动的特性1.浮动的元素排在同一排2.浮动的元素内容撑开宽度3.浮动的元素支持所有css样式4.浮动的元素脱离文档流5.浮动的元素提升层级半级(属性盖住内容溢出，可做文字环绕div的效果)(未完待续......)

html/css学习笔记（一）相关推荐

CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...

html/css学习笔记（一）

html/css学习笔记（一）相关推荐

最新文章

热门文章