zoukankan      html  css  js  c++  java
  • css使用总结

    最近一直在做项目的页面样式,做了一些总结

    (***:常用,**:一般 ,^:较少)

    首先从基础的开始,

    文本:
    *** text-align:文本对齐。(left/right/center) 
    ^ text-transform:lowercase。文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母,或每个单词的首字母大写。
    ** line-height:设置行高。行高是指上下文本行的基线间的垂直距离,当文本的line-height设置为父容器的高度就可以实现文本垂直居中(我在实际项目不会使用行高哎,一般都是通过文本对齐)
     
    背景:
    *** background-color和background:
    描述元素的背景,其中color为backgroud默认的第一个属性值。
    no-repeat,背景图像不平铺。
     
    字体:大小,颜色,粗细
    *** font-size,color,font-weight( 定义由粗到细的字符,100到900。400 等同于 normal,而 700 等同于 bold。)
    字体的设置是很常见的,一般项目会在common.less文件中设置全局的一些字体样式.字体的粗细常用的就是400和bold
     
    列表:
    ul:无序列表
    ol:有序列表
    ** list-style-type属性指定列表项标记的类型—— disc,默认为实心圆。none是无标记
     
    边框:
    !! border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
    *** boder:width style color(默认顺序)
    (style)*** solid:实线边框
     
    显示隐藏:隐藏元素 - display:none或visibility:hidden
    visibility隐藏元素但仍占用空间。display隐藏元素并且不占用空间。
     
    块级元素和行内元素
    块元素是一个元素,占用了全部宽度,在前后都是换行符。(一个元素一行)如:<div><p><h1>
    内联元素只需要必要的宽度,不强制换行。(不会换行)如:<span><a>
    diaplay:inline/block.可以变更元素的显示类型
     
    ******** css定位(重点)
    position:
    static(默认,无定位)
    fixed:相对于浏览器, 窗口是滚动的它也不会移动:
    relative:相对其正常位置( 相对定位元素经常被用来作为绝对定位元素的容器块。)
    absolute:相对最近的position父元素( absolute 定位使元素的位置与文档流无关,因此不占据空间。)一般用于是元素左右对齐
    //div2在div1的左下角
    .div1{
    position:relactive;
    .div2{
    position:absolute;
    left:0;
    buttom:0;
    }
    }
     
    CSS overflow 属性用于控制内容溢出元素框时显示的方式。
    *** overflow:auto/scroll  内容超出时就会显示滚动条
     
    CSS3
    ** 圆角实现:border-radius设置四个边框的半径 ,也可以单独指定,如border-top-left-radius
    ** 渐变实现:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
    例如:从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到黄色:
    background-image: linear-gradient(to bottom right, red, yellow);

    实现效果:

    ********Flex布局(重点):
    display:flex
    flex-direction:row/column 主轴的方向
    justify-content:主轴对齐
    flex-start | flex-end | center | 起始|结尾|中间|
    align-items :交叉轴对齐
    flex-wrap 属性用于指定弹性盒子的子元素换行方式, 默认, 弹性容器为单行
  • 相关阅读:
    spring boot整合mybatis+mybatis-plus
    Spring Boot Shiro 权限管理
    Spring Boot 热部署(转)
    SpringBoot 使用yml配置 mybatis+pagehelper+druid+freemarker实例
    详解Spring Boot配置文件之多环境配置
    Java 泛型-泛型类、泛型方法、泛型接口、通配符、上下限
    mybatis中整合ehcache缓存框架的使用
    Java总结篇系列:Java泛型
    java中接口之间的继承
    Java中接口继承泛型接口
  • 原文地址:https://www.cnblogs.com/hl-tyc/p/13962497.html
Copyright © 2011-2022 走看看