• HTML/CSS 知识点02 (转)


    一个完整的页面由三部分构成:

    • html:超文本标记语言
      • 通过语义化标签,搭建页面"结构"
    • css:层叠样式表
      • 负责页面"样式",美化页面的
    • js:轻量级的脚本语言;交互指的是两个地方(行为)
      • 前端自己在页面上写的"动效"
      • 前后台的"数据交互"
        结构,样式,和行为三者相结合

    css的引入方式

    1. 嵌入式;(内嵌式)

      <style>
          body{
              height:100%;
              background-color: red;
          }
      </style>
    2. 行内样式

      <body style="height:100%; background: #333333">
    3. 外链式(真正的开发,用的都是外链)

      <link rel="stylesheet" href="style.css"/>

    css的优先级

    • 行内>内嵌>外链

    css常见属性和样式

    • 当设置错误的时候,在chrome的控制台,会有黄色的叹号,进行提示
    • color:颜色值; 颜色有三种表示方法
      快捷键:c+tab
      • 用英文:red
      • rgb(255,0,0)
      • #fff
    • font-size:字体大小
      • 快捷键:fsz30->font-size:30px
        font:400 14px/28px "宋体";
    • background:添加背景
      图片默认是横向重复和纵向重复
    • 位置:
      • 横向位置:left center right
      • 纵向位置:top center bottom
    • 综合写法:background: url("images/bg2.png") no-repeat left center red;
      • background-image:url("图片地址")
      • background-repeat:no-repeat; /repeat-x;/repeat-y
      • background-position:0 0
      • background-color:red
    • 字体是否倾斜
      • font-style:italic 倾斜/ normal 正常
    • 下划线和删除线
    • text-decoration: line-through; 删除线
    • text-decoration: none; 去除下划线
    • text-decoration: underline;添加下划线

    css中的选择器:

    • 1.标签选择器:div p ul li dt dd em i u del strong b input label from table
      • 缺点:只能进行共性的操作,无法个性操作
    • 2.class选择器
    • 3.id:
      • .class名,同一个页面能有无数个相同的class名
      • #id名,同一个页面只能有一个ID名;(ID名是不能重复的)
      • 在真正的开发过程中,class是用来设置样式的,id是用来获取元素

        <div class="div1 div2 div3" id="div1"></div>
    • 4.后代选择器:div p(把div容器下,子子孙孙的p元素都选择上了)
    • 5.子选择器:div > p(选择div容器下的儿子);兼容IE7+
    • 6.交集选择器: div.div1
    • 7.并集选择器:div,p
    • 8.通配符*:代表所有的元素
    • 9.序选择器:兼容IE8+
      • div > p:first-child
      • div > p:last-child
    • 10.下一个兄弟选择器 ul li+li{} 兼容IE7+

    开发常用的浏览器

    • chrome
    • IE7~11
    • firefox

    CSS的继承性和层叠性

    • 以font开头的属性都能够继承;line-height
    • color可以继承
    • text开头的也可以继承,比如text-align

    css权重

    • !important权重无穷大;(少用为好)
    • id的权重大于class的权重

    css盒子模型

    • css盒子模型由5部分:
      • 内容的宽高+padding+border+margin
    • 单行文本的居中:height = line-height
    • 多行文本的居中,padding和line-height
    • padding:
      • padding是内边距
      • padding的颜色和内容的颜色一致;background-color填充的是border以内的颜色
      • padding是复合值
        padding:30px; ->pl30; pt30;pr30;pb30
        padding:20px 30px; ->上下为20px 左右30px
        padding:10px 20px 30px; -> 上10px 左右20px 下30px
        padding:10px 20px 30px 10px; 上 右 下 左

        如果现设置padding:30px
        再设置padding-left:10px
        请问最后的值各是多少?
        左10px; 其他都是30px
    • margin:外边框
    • border:
      • border:1px solid #000;
      • border-width
      • border-style:solid(实体),dashed(虚线),dotted(点)
      • border-color

    行内元素和块级元素

    • p标签虽然是文本标签,但是它可以当容器来使用,p标签内一定不能放div; p段落也是块元素,他独占一行
    • 文本元素:p span a i em u b strong img
    • 容器级:div li dt dd h级(不建议)
    • 除了p,所有的文本元素,都是行内元素
    • 所有容器级别的元素,都是块元素
    • 块和行内元素的相互转化
      • display:inline; //行内
      • display:inline-block;//行内块
      • display:block; //块
    • 关于定位:大部分情况,建议的是:父相子绝(父亲:相对定位,儿子:绝对定位)
    • 关于脱离文档流的方法
    • 浮动 float:left; float:right;
    • 绝对定位 position:absolute;
    • 固定定位 position:fixed;
    • 重点:1)父相子绝 2)行内元素一点脱离文档流,就可以设置宽高了;
    • 注意:行内元素,一旦脱离文档流,虽然能设置宽高,但是,如果不设置宽的话,会默认跟内容一样宽;而块级元素,如果不设置宽度的话,默认跟父级一样块,没有父级的话,默认跟屏幕一样宽
    • 清除浮动
      • 固定高度height:xxxpx;
        缺点:如果作为产品列表的容器展示,我们无法知道容器的具体高度
      • overflow:hidden
        1. 溢出隐藏
        2. 清除浮动
          缺点:如果父容器比较小,子容器比较大;父容器如果通过overflow:hidden来清除浮动的话,子容器就看不到了
      • clear:both
        缺点:可以解决浮动引起的文档流错乱问题,但是上面浮动元素的父容器该没有高度还没有高度
      • 伪类清除浮动

        ul::after{
        display: block;
        height:0;
        content: '';
        clear: both;
        }
    • 透明度处理
      • rgba() 背景透明,文字不透明;
      • opacity:0 背景透明,文字也透明;

        opacity:0.1;/*不兼容IE7浏览器*/
        filter:alpha(opacity=10);

    最基本的开发,首先必须创建的项目结构

    • images文件夹:放切好的图片
    • css文件夹:放置css文件:index.css
    • index.html文件

    关于继承

    • 宽度继承:如果没有父级,块元素的宽度默认跟可视区一样宽;如果有父级的情况下,默认跟父级宽度一样宽(宽度可以继承,但高度无法继承;)
    • font可以继承
    • color可以继承:当遇到a标签的时候, color无效;
    • line-height可以继承

    当文本超度固定宽度的处理方法:

    • 单行文本出超固定宽度出现省略号的写法:

      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis
    • 英文不折行的问题处理: word-wrap:break-word;

    • 出现滚动条的写法overflow-y:scroll;

    区分伪类和伪元素

    • 伪元素:用:和::都可以,现在建议用::
    • 伪类:给当前选择器添加动效,只能用:
    Don't worry too much about the ambiguous future; just make the effort for the explicit present. 不为模糊不清的未来过分担忧,只为清清楚楚的现在奋发图强。
  • 相关阅读:
    小程序导出excel
    小程序搜索框加icon
    微信小程序全局传参 app传参
    长亭安服面经
    uni关于生成支付宝小程序问题
    Echarts图表使用
    js获取url路径斜杠分开
    git---更新gitignore文件,使之生效
    常见Cpu 100%的原因
    OFFICE 2019 INSTRUCTIONS
  • 原文地址:https://www.cnblogs.com/zuiai/p/7078470.html
Copyright © 2020-2023  润新知