CSS、HTML、meta常用代码

头像
快乐的单身汉
    阅读 7 分钟
    1

    CSS

    1、CSS选择器？引用CSS的方式？CSS 优先级如何计算？ css在线文档

    ①通配选择符、标签名选择符、类选择符、ID选择符、后代选择符(包含)、子选择符、相邻选择符、兄弟选择符、属性选择符、伪类、伪元素。
②行内样式、内嵌式、link链接式、import导入式。
③!import 》行内样式》ID》class 》标签名选择符，选择符越具体等级就越高。

    2、css盒模型 box-sizing

    定义浏览器应该如何计算一个元素的总宽高；content-box 标准模式下的盒模型，元素的width和height不包含padding和border，它的总宽高等于设置的width和height及border、padding之和；
border-box 怪异模式下的盒模型，元素的width和height包含padding和border，有border和padding也不会改变元素的实际宽度。
盒模型有四个属性从里到外 content、padding、border、Margin

    3、link链接式、import导入式
    <link rel="stylesheet" href="css路径" type="text/css" >

    link权重大于@import
link属于html标签，可以通过 JS 操作 DOM 来改变样式；@import是css提供的，只能加载CSS
link在页面加载时被同时加载，@import在页面加载完之后再加载，如果网页较大可能会页面无样式、页面闪烁再出现网页样式

    4、border实现三角形
    三角形指向右边那左边边框设置实线solid，其他边框设置透明transparent
    用border做三角形
    水平垂直居中
    8、CSS sticky-footer布局

    <style>
  html,body{height:100%}
  .content{min-height:100%;margin-bottom:-30px}
  .content-son{padding-bottom:30px}
  .foo{height:30px}
</style>
<body class="" onmousemove="" ontouchstart="">
<div class="content">
  <div class="content-son">顶部</div>
</div>
<div class="foo">底部--页面没有超出固定在底部，超出则正常显示</div>
</body>

    1、实现一个最大的正方形

    //第一种 无法显示子元素
div{width:100%;heigth:0;padding-bottom:100%}
//第二种 伪元素 + padding-bottom + absolute
.father{width:100%;position:relative}
.father::after{content:'';display:block;padding-bottom:100%}
.son{position:absolute;width:100%;height:100%}

    2、一行水平居中，多行居左
    .father{text-align:center}
    .son{display:inline-block;text-align:left}
    3、实现两栏布局 左侧固定，右侧自适应布局
    利用浮动，左边元素宽度固定 ，设置向左浮动。将右边元素的 margin-left 设为固定宽度，右边自动撑满父元素
    或者右边元素的 margin-left改为，overflow: hidden/auto; 这样右边就触发了 BFC
    利用绝对定位，父级元素设为相对定位。左边元素 absolute 定位，宽度固定。右边元素的 margin-left 的值设为左边元素的宽度值。
    或者右边元素 absolute 定位，left为左边元素的宽度值
    4、css3实现三栏布局,左右固定,中间自适应
    使用flex布局 dispaly：flex；左右两边元素 flex 0 0 200px；中间元素flex：1
    使用浮动实现，父元素固定宽高，左边盒子左浮动，右边盒子右浮动，固定宽高，中间的盒子自适应。将中间自适应盒子html标签放到最后
    使用绝对定位来实现 给父盒子设置相对定位，两边盒子设置绝对定位，依据父盒子来进行偏移。左边盒子left 0，右边盒子 right 0，中间盒子 margin 0 200px
    5、BFC理解
    是块级格式化上下文，一块独立的渲染区域，相当于一个容器，容器里面的元素不会影响外边元素布局，外部的元素也不会影响内部元素的布局
    激活方式

    浮动元素 float left/right
定位元素  position absolute/fixed
display flex/inline-block/table-cell
overflow hidden/auto/scroll 非visibility

    作用

    解决margin的重叠问题，默认相邻元素的margin会发生重叠
解决高度塌陷的问题：在子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。把父元素变成一个BFC，设置overflow hidden
创建自适应两栏布局，左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠
    .left{width:100px;height:200px;background:red;float:left}
.right{height:300px;background:#00f;overflow:hidden}
<div class="left"></div>
<div class="right"></div>

    6、实现左右等高布局
    每个div使用display:table-cell
    div的父元素使用display:flex
    7、清除浮动
    浮动元素的下一个兄弟元素 {clear:both;}
    浮动元素的父元素{display:block;zoom:1;overflow:hidden;}
    浮动元素的父元素::after{display:block;clear:both;visibility:hidden;height:0;content:'';}
    元素设置浮动会破坏文档流结构，影响元素的布局。设置clear:both的当前元素会把相邻元素中设有浮动属性的元素，当做没有浮动一样来看待，抵消对自己的影响

    HTML

    1、关闭首个字母大写（HTML）

    <input type="text" autocapitalize="off"/>

    2、伪类:active失效

    body class="" onmousemove="" ontouchstart=""

    3、H5页面模板

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no,date=no,address=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="shortcut icon" href="favicon.ico">
    <title>Title</title>
</head>
<body class="" onmousemove="" ontouchstart="">
    <div class="main"></div>
</body>
</html>

    meta

    1、设置页面的编码（HTML）

    <meta charset="UTF-8">

    2、禁止手机放大或缩小（HTML）

    <meta name="viewport"

    content="width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    user-scalable=no"/>"

    2、删除默认的苹果工具栏和菜单栏，默认全屏（HTML）

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    3、启动或禁用自动识别页面中的电话号码，邮箱、地址（HTML）

    <meta name="format-detection"
    content="telephone=no, email=no,date=no,address=no"/>

    4、文档兼容模式 -- IE以最高级模式渲染文档（HTML）

    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">

    5、顶部状态栏背景色（HTML）

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

    6、页面的关键字、描述--搜索引擎使用（HTML）

    <meta name="description" content=""/>
<meta name="keywords" content=""/>

    7、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

    <meta name="msapplication-tap-highlight" content="no">

    CSS

    1、取消 input search 的close（CSS）

    input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none; //此处只是去掉默认的小×
}
::-webkit-search-cancel-button {
    display:none; 
}
input[type="search"]{-webkit-appearance:none;}

    7、重写占位符样式

    input[type=search]::-webkit-input-placeholder{
color: blue;
}

    2、禁止选中复制文本（CSS）

    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

[contenteditable=true], input, textarea {
    -webkit-touch-callout: auto !important;
    -webkit-user-select: auto !important;
    -khtml-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important
}

    3、input和button 消除触摸阴影（CSS）

    -webkit-tap-highlight-color: transparent;

    4、取消button的默认样式

    -webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
outline: 0;

    5、改变webkit表单输入框placeholder的颜色值

    input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

    6、媒体查询（CSS）

    (@media screen and (max-width: 330px) and (min-width: 311px) {}

    7、CSS模板

    @charset "UTF-8";a,body,button,div,form,h1,h2,h3,h4,h5,h6,header,html,input,nav,p,section,table,textarea，dl,dt,ol,ul,li{margin:0;padding:0;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body,html{width:100%;font-family:Helvetica,Arial,'Microsoft YaHei',sans-serif;background-color:#f2f2f2;font-size:100px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
a,button,input,textarea{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-decoration:none;border:0}
dl,dt,ol,ul,li{list-style:none}
[contenteditable=true],input,textarea{-webkit-touch-callout:auto!important;-webkit-user-select:auto!important;-khtml-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}
.ellipsis{overflow:hidden;-ms-text-overflow:ellipsis;white-space:nowrap;text-overflow:ellipsis}
.ellipsis-clamp-3{overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

    other

    autocapitalize 首字母自动大写
autocorrect 自动改正
autocomplete 自动输入
$(this).data('hello');
$(this).attr('data-hello')
display:flex;flex-direction:column;justify-content:center 通讯录 字母导航样式
e.currentTarget.dataset.xxx与e.target.dataset.xxx
e.currentTarget.options.selectedIndex 与 e.currentTarget.value
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
.clearfix:after, .clearfix:before{content:"";display:table;}
.clearfix:after{clear:both;}

    常用连接
    CSS在线API--1
    meta标签扩展

    htmlcssmeta
    快乐的单身汉
    349 声望9 粉丝

    一名可遇不可求的单身汉

    « 上一篇
    HTML、ES6、兼容性
    下一篇 »
    JavaScript（1）

    引用和评论

    推荐阅读
    头像
    Vue3知识点及构建开发遇到的错误

    快乐的单身汉阅读 863

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.5k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.6k

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 2.3k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.5k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.4k评论 3

    0 条评论
    得票最新