=============================================================================================
盒子模型
1.background
1.1
background-color
background-image: url("");
background-repeat
background-size: (x轴的比例 y轴的比例)
background-position
background-attachment:fixed;(背景图固定不滚动)
1.2 复合写法
background: color iamge position repeat;
2.border
2.1复合写法
border: border-width border-style border-color;
2.2边框圆角
border-radius
3.padding
padding:20px 10px; 上下边距:20px 左右边距:10px
padding: 20px 30px 4px; 上 左右 下
padding:10px 20px 30px 40px; 上 右 下 左
4.margin
4.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-repeat border: border-width border-style border-color padding: 上 右 下 左 margin: 上右 下 左 font: font-style font-weight font-size/line-height font-family;
=============================================================================================
标签
1.常见的标签
title标签
双标签
语义:网页标题 权重最大
div标签
双标签
语义:无意义
h标签
双标签
语义:标题
默认样式:font-size font-weight margin
h1权重最大 h2次之
p标签
双标签
语义:段落
默认样式: margin
p标签再嵌套不要包含块元素的标签
ul标签
语义:无序列表
默认样式:margin padding-left list-style-type
li标签
语义:列表项
默认样式:list-style-type;
ol标签
语义:有序列表
默认样式:同ul
dl标签
字典标签
语义:自定义列表
默认样式:无
dt标签
语义:列表标题
默认样式:无
dd标签
语义:列表说明
默认样式:margin-left
小结
快属性标签的特性:
1.默认父级100%的宽
2.支持所有css样式
3.独占一行
============================================================================================= 内联属性的标签
内链属性标签特性:
1.同属性的标签排在一排
2.内容撑开宽度
3.不支持宽高,不支持上下的padding和margin
4.代码换行被解析 间距的大小取决于父级的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学习笔记(一)的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  10. CSS学习笔记:溢出文本省略(text-overflow)

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

随机推荐

  1. Django orm 实现批量插入数据

    Django ORM 中的批量操作 在Hibenate中,通过批量提交SQL操作,部分地实现了数据库的批量操作.但在Django的ORM中的批量操作却要完美得多,真是一个惊喜. 数据模型定义 首先,定 ...

  2. Avoiding Common Networking Mistakes

    https://developer.apple.com/library/content/documentation/NetworkingInternetWeb/Conceptual/Networkin ...

  3. 如何正确的使用Ubuntu以及安装常用的渗透工具集.

    文章来源i春秋 入坑Ubuntu半年多了  记得一开始学的时候基本一星期重装三四次=-= 尴尬了 觉得自己差不多可以的时候 就吧Windows10干掉了 c盘装Ubuntu 专心学习.   这里主要来 ...

  4. Android精通之OrmLite数据库框架,Picasso框架,Okio框架,OKHttp框架

    版权声明:未经博主允许不得转载 OrmLite基础知识 什么是OrmLite框架,在我没用这个框架时,不知道它有多好,用了才知道很方便哦,为了提供开发效率,Android开发者需要懂得运行多种框架进行 ...

  5. 用node.js做cluster,监听异常的邮件提醒服务

    __ __ __ _ __ ____ ____ ____/ /__ _____/ /_ _______/ /____ _____ ___ ____ ___ ____ _(_) / / __ \/ __ ...

  6. Linux - 变量的查看与设置

    printenv - print all or part of environment 显示所有变量:print 显示某个变量:print <variable name> 或者 echo ...

  7. LeetCode手记-Add Binary

    问题描述 问题分析 分析题意,此题实际是求解两个二进制数的和,但是有两点要注意: 1.字符串的长度不限,所以相应十进制数值很可能会超过int的上限. 2.二进制的加法规则是自右向左进位,需要注意,以题 ...

  8. JavaScript中原型链的那些事

    引言 在面向对象的语言中继承是非常重要的概念,许多面向对象语言都支持两种继承方式:接口继承和实现继承.接口继承制只继承方法签名,而实现继承继承实际的方法.在ECMAScript中函数没有签名,所以EC ...

  9. Split()[1]中的[1]是什么意思

    split()方法是将指定字符串按某指定的分隔符进行拆分,拆分将会形成一个字符串的数组并返回 如:string str = "aa.bb.cc.dd"; string[] strA ...

  10. 基于 zepto 的触摸函数封装

    移动端使用 zepto 做一些基于触摸的动画的时候,需要开发一个函数库. 功能:实例化对象以后能够,触发相应的事件,能够返回给我,当前的移动方向和 X 轴 或者 Y 轴 的移动位移. var Touc ...