Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

Stella981
• 阅读 522

1.html模板

模板

2.DOCTYPE声明放在html文件头部
最新HTML5用声明

3.css的引入方式
a.直接在html下引入
b.直接写在div内;如


c.写一个css文件(文件里不用写style),在html头部中引用;

(./表示在根目录下) d.在css文件中引入;@import url(../star.css);(必须写在css文件的开头)

4.ID选择器:ID="id名",在样式中用# +id名{}表示
id名要以英文字母开头;id名是唯一的
class选择器:class="class名",在样式中用 . + class名{}表示
标签名选择器<class选择器<id选择器<行间样式

5.div的布局属性position属性
a.position:static;无定位;表示div没有position属性不能用top、left等定位
b.position:relative;相对定位;表示div用top、left、right、bottom来定位
定位时根据父div,没父div时用他的前一个同属性div
c.position:absolute绝对定位;能用top、left等将div准确的移到你想要的位置
能覆盖div,就像图层的最上层;定位时根据父同属性的div定位,没有
同属性的父div时相对于body定位(注意:1.如果父div不是absolute属性
不会影响到该子div的定位;2.如果改div没有用top等定位会默认放置相对于
上个div的高的位置下)
d.position:fixed;相对于窗口的固定位置;于absolute类似,当窗口滚动时div不会
随着窗口滚动
6.css的基础样式:
width:100px;宽100像素
height:100px;
背景颜色蓝色
background-image:url("图片路径");背景图片
background-repeat : repeat | no-repeat | repeat-x | repeat-y 如何重复背景图片
平铺/不平铺/向x轴平铺/向y轴平铺
background-position:第一个值(x轴位置)第二个值(y轴的位置);
background的复合写法:
background:color image position repeat;
例:background:red url("img/1.jpg") 30px 100px no-repeat;
background-attachment:fixed;背景图固定不滚动;
background-size:第一个值(x轴的比例) 第二个值(y轴的比例);

7.border边框
border-width:50px;边框宽度
border-top-width;边框顶部宽度 border-right-width:边框右边宽度
border-bottom-width:边框底部宽度 border-left-width:边框左边宽度
border-style:solid;边框样式:实线
border-color:blue;边框颜色:蓝色
border的复合写法:
border:border-width border-style border-color;
border-top:border-top-width border-top-style border-top-color;
border-radius:10px;边框圆角为10像素

8.padding内边距
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding的复合写法:
padding:10px 20px;俩个值 第一个值代表上下 第二个值代表左右
padding:10px 20px 40px;三个值 第一个值代表上 第二个值代表左右 第三个至代表下
padding:10px 20px 30px 40px;四个值代表上右下左

9.margin外边距
margin-top;上外边距
margin-right;右外边距
margin-bottom;下外边距
margin-left;左外边距
margin的复合写法和padding类似;
注意:标签的嵌套 确定父子级关系
a.第一个子级的margin-top会在特定的情况下穿透父级
规避方法:1、给父级加边框
2、给父级加 overflow:hidden;
3、不要用margin-top,用父级的padding-top代替
b.兄弟关系的margin-top和margin-bottom会叠压

10.文本设置(以下可以继承文本样式)
font-size 文字大小(一般为偶数)
font-size:16px; 字体为16像素
font-family 文字字体
font-family:"SimSun";字体为宋体
color 文字颜色
color:rgb(255,0,0);字体为红色
line-height 文字行高
text-align 文本对齐方式(left center right)
text-indent 首行缩进(em缩进字符或者是具体的数值)
font-weight 文字着中(normal bold bolder 100-900)
font-style 文字倾斜(normal italic oblique)
text-decoration 文本修饰(none underline overline line-through)
letter-spacing 字母间距(具体的数量px)
word-spacing 单词间距(以空格为解析单位)

11.常见的复合属性
background:background-color background-image
background-position background-repeat
border:border-width border-style border-color
padding:padding-top padding-right padding-bottom padding-left
margin:
font:font-style font-weight font-size/line- height font-family;

12.常见标签
title标签 写法: 双标签 语义:网页标题 权重最大
div标签 写法:

双标签 语义:无意义
h标签 h1~h6 写法:

...
语义:标题
h标签默认样式:font-size font-weight margin h1权重最大h2次之
p标签 写法:

语义:段落 默认样式:margin p标签在嵌套里不要包含块元素的标签
ul标签 写法:
    语义:无序列表 默认样式:margin padding-left list-style-type
    li标签 写法:
  • 语义:列表项 默认样式:list-style-type
    ol标签 写法
      语义:有序列表 默认样式:margin padding-left list-style-type
      ul,ol和li是组合标签 ul,ol的第一层子级一定是li li的父级一定是ul或ol
      dl标签 字典标签 写法:
      语义:自定义列表 默认样式:无

      语义:列表标题 默认样式:无
      语义:列表说明 默认样式: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"新窗口打开 href属性中:1、如果要连接一个网址,一定要加http:// 2、#代表连接到当前页 内联块块标签: 内联块属性特性: 1、同属性的标签排在同一排 2、内容撑开宽度 3、支持所有的CSS的样式 4、代码换行被解析,间距大小取决于父级的font-size的大小 注意:图片路径地址一定要正确,alt属性一定要写 img标签 写法:图片说明 单标签 语义:图片 默认样式:在低版本浏览器中有默认的边框

      13.标签类型的转换
      显示为无:display:none;
      块属性 display:block;
      内联属性:
      内联:display:inline;
      内联块:display:inline-block;

      14.浮动的样式和特性
      浮动的特性:
      1、浮动的元素排在同一排
      2、浮动的元素内容撑开宽度
      3、浮动的元素支持所有的css样式
      4、浮动的元素脱离文档流
      5、浮动的元素提升层级半级(属性盖住内容溢出,可做文字环绕div的效果)
      注意:
      1、overflow溢出 会重新计算元素的空间
      hidden溢出隐藏
      auto溢出出现滚条
      scroll出现滚动条
      2、元素的居中
      margin:0 auto;
      3、元素的伪类
      伪类:就是css一些元素身上的特殊属性
      :hover 鼠标停留
      :after 在元素内容之后插入一些内容
      浮动:就是使元素脱离文档流,按照一定的方式排列,遇到相邻的浮动元素或者父级的边界停下来

      15.BFC的常见方法及优缺点
      BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题
      1、父级也浮动
      弊端:左右的margin:0 auto;会失效;
      2、给父级加display:inline-block;
      弊端:左右的margin:0 auto;会失效;(如果需要让元素居中可以给父级家text-align:center)
      3、给父级加高
      弊端:扩展性不好
      4、br标签
      写法
      作用:换行
      5、clear
      clear 元素的某一方向不允许出现其他的浮动元素
      left right both推荐使用 none
      第4、5种:不符合W3C规范 违反结构、样式、行为三者分离原则
      6、伪类清浮动
      :after{
      content:"";display:block;clear:both;
      }
      目前主流方法,建议使用。

      16.定位特性
      定位:把一个元素按照一定的方式定到页面的某一位置
      position
      相对定位 relative
      针对自己本身的位置进行定位
      绝对定位 absolute
      针对有定位的父级的原点进行定位,如果父级没有定位,会找父级的父级身上
      有没有定位,如果有,针对父级的父级的原点定位,以此类推,如果都没有定位,
      针对document进行定位
      温馨提示:绝对定位即使没有初始值,也一定要设置值(如:left:0px;top:0px;)
      固定定位 fixed
      针对页面窗口进行定位
      温馨提示:IE6 不支持固定定位
      偏移量:left、top、right、、bottom
      注意:left top比right bottom的优先级要高
      三种定位特性
      相对定位 relative
      1.不影响元素本身的特性
      2.不使元素脱离文档流
      3.提升层级
      4.无法触发BFC
      5.针对自己本身进行定位
      绝对定位 absolute
      1.会使元素完全脱离文档流
      2.内容完全撑开宽度和高度
      3.使元素支持所有的css样式
      4.提升层级
      z-index:数值;定位层级设置数值越大,层级越高
      5.绝对定位要和相对定位配合使用
      6.如果有定位父级,针对定位父级发生偏移,没有定位父级针对document发生偏移
      7.如果绝对定位的子级有浮动,可以省略清浮动的操作
      固定定位 fixed
      1.不兼容IE6
      2.针对窗口进行定位
      3.如固定定位的子级有浮动,可以省略清浮动的操作

      17.派生选择器
      是由id选择器 class选择器 标签名选择器组合而成
      id选择器 10000
      class选择器 100
      标签名选择器 1
      例:#box span{} =10000+1 这个值越高,优先级就越高

      18.兼容性
      页面在不同的浏览器中可能会显示不同。
      1、在IE6下,子级的宽度会撑父级设置好的宽度
      温馨提示:盒模型的计算一定要精确,否则IE浏览器可能会显示不同
      2、在IE6中,元素浮动,如果宽度需要内容撑开,需要给里面的块元素都添加浮动元素才可以
      3、在IE6下,元素要同过浮动排在同一排,就需要给这行元素都加浮动
      例:如果一右边元素浮动,左边元素利用margin排在同一排,俩个元素之间会产生3像素的间隙
      4、注意标签的嵌套规则;例:

      网页默认会产生2个p标签
      5、在IE6下,元素的高度如果小于19px的时候,会被当成19px来处理
      解决方法:ovreflow:hidden;
      6、在IE6下,不支持1px的边宽样式;例:border:1px dotted red;
      解决方法:切背景平铺
      7、在IE6下,大部分兼容性都是因为haslayout属性的触发问题,尽量触发haslayout属性可以减少
      很多IE下的兼容性问题;
      父级有边框的时候,子元素的margin会失效
      解决方法:触发父级的haslayout属性
      8、IE6下双边距的bug
      在IE6下,块元素有浮动有横向的margin的值的时候,横向的margin的值会扩大俩倍
      解决方法:把块元素转成内联元素
      9、设置margin-left 一行中左侧的第一个元素有双边距
      设置margin-right 一行中右侧的第一个元素有双边距
      解决方法:转化成内联元素
      10、在IE6,7下,li本身没有浮动,li里面的内容有浮动,li下会产生一个间隙
      解决方法:1.给li加浮动 2.给li加vertical-align:top;
      在IE6下,最小高度的bug和li的间隙问题共存的时候,vertical-align不好使
      解决方法:给li加浮动
      11、当一行子级的元素宽度之和和父级的宽度相差超过3px,或者子级元素不满行的情
      况的时候,最后一行的子级元素的margin-bottom会失效
      12、在IE6下的文字溢出bug
      子元素的宽度和父级的宽度如果相差小于3px的时候,俩个浮动元素中间有注释或者内联元素,
      就会出现文字溢出,内联元素越多,溢出越多
      解决方法:用div把注释或者内联元素包起来
      13、在IE6下,当浮动元素和绝对定位元素是兄弟关系的时候,绝对定位会失效
      解决方法:不让浮动元素和绝对定位元素是兄弟关系,用div或者其他标签把a标签包起来
      14、在IE6、7下,子级元素有相对定位,父级overflow保不住子级元素
      解决方法:给父级也加相对定位
      15、在IE6下,如果绝对定位的父级的宽高是奇数的时候,子级元素的right和bottom值会有1px的偏差
      16、在IE6下,当设置body高度,div设置固定定位是,拉动网页滚动条div并不会固定
      解决方法:用JS
      17、在IE6、7、8下设置透明度opacity无效
      解决方法:设置透明度应写俩行代码:opacity:0.5; filter:alpha(opacity=50);
      18、在IE6、7下,输入型的表单标签控件上下会有1px的间隙。
      处理方法:给input加浮动
      19、在IE6下,引用透明图片在网页显示不出透明效果
      解决方法:JS
      20、注释里面的内容在IE浏览器中通过条件注释语句是可以进行识别的
      例:
      21、css hack:
      \9 IE10之前的IE浏览器解析的代码 例:background:yellow\9;
      +或者*表示IE7之前包括IE7的浏览器 例:+background:black;
      _表示IE6之前包括IE6的浏览器 例:_background:pink:

      点赞
      收藏
      评论区
      推荐文章
      blmius blmius
      2年前
      MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
      文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
      Jacquelyn38 Jacquelyn38
      2年前
      2020年前端实用代码段,为你的工作保驾护航
      有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
      皕杰报表之UUID
      ​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
      Wesley13 Wesley13
      2年前
      Java获得今日零时零分零秒的时间(Date型)
      publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
      Stella981 Stella981
      2年前
      KVM调整cpu和内存
      一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
      Wesley13 Wesley13
      2年前
      mysql设置时区
      mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
      Stella981 Stella981
      2年前
      Sass
      嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
      Wesley13 Wesley13
      2年前
      00:Java简单了解
      浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
      Stella981 Stella981
      2年前
      Django中Admin中的一些参数配置
      设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
      Wesley13 Wesley13
      2年前
      MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
      背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
      Python进阶者 Python进阶者
      2个月前
      Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
      大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这