zoukankan      html  css  js  c++  java
  • css基础知识二

    1、盒模型:

      实际宽度:外边距*2+内边距*2+边框*2+内容宽度(注意这点,可解决界面元素轻微浮动问题,如hover有边框,以前没的时候会有轻微浮动)

      作用:他规定了网页元素如何显示以及其相互关系

    2、padding会撑大容器,而margin不会。

      这点巧用(自己总结的):① 能用margin的别用padding

                  ② 网页中为一个元素添加一边的下划线时候用padding

                  ③ 导航栏中,用<ul><li>写的时候,先调节<li>的padding:npx,再调节<ul>的margin,记得margin的值减去n

    3、background-size : cover:扩大图像,使得背景图完全覆盖背景区域,知道碰到最后一个边缘停止

                contain:扩大背景图像,碰到第一个边缘就停止

    4、背景的冷知识,设置scroll(随页面滚动而滚动)或fixed(不随页面滚动)

    5、渐变:线性渐变:linear-gradient  属性值(to top,red 40%,blue 50%) 这里注意加上-webkit后不用加to了就

         径向渐变:radial-gradient 属性值(center,shape size,start-color,last-color)

            shape:circle或ellipse

            size:自行查阅吧,用的不多。

           重复渐变:repeating-linear-gradient

    6、浏览器兼容: Firefox:-moz-  

            Chrome,Safari:-webkit-

            Opera:-o-

    7、首行文本缩进:text-indent:2em

    8、溢出处理:   white-space:normal / nowrap(不换行)

          文本溢出:  text-overflow: clip(直接裁剪)  ellipsis 通过...来显示

              出现...的条件   ① white-space:nowrap  ② text-overflow:ellipsis ③ ④ overflow:hidden

          长单词换行(只对英文有效) word-wrap : break-word

          文本换行 word-break:break-all 破坏单词结构进行换行  keep-all:在半角状态下的空格进行换行

    9、letter-spacing 设置文字间间距   word-spacing 设置英文单词之间的间距

    10、border-collspse separate:分离边框(默认) colapse(合并边框,不会挤压)

    11、表格文本对齐 :vertical-align : top / bottom /middle

    12、浮动定位 float

        将元素排除在普通流之外,元素在网页是不占空间的

        浮动元素会放在包含框的左边或右边,但依然在包含框内

        浮动元素在浮动时。可以向左或向右移动,直到碰到包含框或其他浮动元素位置

      特点:

        浮动元素边缘不会超过父元素的边框

        浮动元素默认不会重叠

        浮动只能左右浮动,不能上下浮动

        所有元素设置为浮动元素的话,默认转换为块级元素

      注,

        子元素有浮动的话,记得给父元素加上overflow:hidden,意为拉子元素进入框中

        设置overf后才能用padding设置位置

        给父元素内所有子元素浮动后,不会撑开文本流。当给父元素内子元素绝对定位后会重叠

    13、清除浮动 clear:left / right /both

        巧用:clear:both,消除两个div之间的间距

    14、margin:0 auto;设置居中的前提是设置宽高

    15、显示 display

          ① none 元素不显示,并不占空间

          ② block 使元素像块级元素一样去显示

          ③ inline 使元素像行内元素一样去显示

          ④ inline-block 行内块 

    16、visibility

          ① visible 默认值,可见

          ② hidden 元素不可见,但占空间

          ③ collapse 用在表格上,可删除行或列,不影响布局

    17、透明度 opacity (注,尽量用raba去设置透明度,因为opacity会影响父级元素下面的子元素)

      IE中设置透明度 filter:alpha (opacity=value)

    18、巧方法,不再父级元素上设置宽高度,而是设置子元素让其撑开

    19、对齐,vertical-align:middle 针对行内元素img,可定义边上文字与当前元素的对齐方式 记得给img加上align="absmiddle"属性

    20、光标 cursor 

          pointer、crosshair 、wait、help、move、text

    21、定位巧用:父类用相对定位,子类绝对定位(轮播图)

    22、给父类元素加上相对定位后,子类元素会相对与父类元素

    23、列表头前加图片:list-style-image:url();

    24、设置列表的标识,list-style-position:outside(外部)inside(内部)

                                    

       补充   overflow:hidden可以清除浮动                

                      

  • 相关阅读:
    【华为云技术分享】【测试微课堂】测试金字塔和持续自动化测试
    【华为云技术分享】【测试微课堂】典型测试设计方法介绍
    【华为云技术分享】测试微课堂 | 有的放矢制定测试计划
    【华为云技术分享】【测试微课堂】DevOps敏捷测试之道
    【华为云技术分享】使用CloudIDE快速体验基于华为云ModelArts SDK的AI开发
    【华为云技术分享】Linux内核发展史 (2)
    前端常见面试题
    网站上面的倒计时功能
    基本的排序算法
    微信支付配置文件WxPay.Config.php如何读取数据库配置信息
  • 原文地址:https://www.cnblogs.com/chenluomenggongzi/p/5676734.html
Copyright © 2011-2022 走看看