zoukankan      html  css  js  c++  java
  • 知了堂学习笔记-CSS样式整理(一)

    height、width

    在height、width属性中使用%值,需要对包含它的块级对象设置宽高,否则height、width属性设置无效。因为%是基于包含它的块级对象的百分比高度。

    无效:

    有效:

    paading、margin

    1.使用paading、margin外补白在已知单个子元素宽高情况下实现居中效果

    padding:

    margin:

    2.在居中的基础上配合border、border-radius,实现按钮效果

    按钮效果:

     border:1px(设置对象边框宽度为1px)solid(设置对象边框样式为实线) blue(设置对象边框颜色为blue)

    border

    1.border-radius实现圆形头像,图片宽高相近时:

    2.利用boder绘制三角形

    设置宽高时:

    不设置宽高时:

    利用transparent将右下左的颜色设置为透明:

     background

    1.background-image以图片做背景:

    2.background-repeat图片平铺方式

    no-repeat:

    repeat-x:

     3.background-origin背景图像开始显示的区域

    border-box:从border区域(含border)开始显示背景图像

    padding-box从padding区域(含padding区域)开始显示背景图像

    content-box从content区域开始显示背景图像

     4.background-clip背景开始剪切的区域(注意不同于background-origin背景颜色也会一同被剪切)

    border-box

    padding-box

    content-box

     5.background-size背景图像大小

    cover图片等比例缩放到完全覆盖容器,背景图片有可能超出容器

    contain背景图像等比例放缩到宽度或者高度与容器的宽度或者高度相同,背景图像始终被包含在容器里

    font

    1.font-style

    2.font-weight

    3.font-family

                                                                                                                                                                      2018/2/08

                                                                                                    知了堂有温度的大学生众筹学习社区

  • 相关阅读:
    MIPS——分支语句
    MIPS简单入门
    迷宫问题——最短路
    用dfs遍历联通块(优化)
    用protractor測试canvas绘制(二)
    android 用java代码设置布局、视图View的宽度/高度或自适应
    HBase编程实例
    Top10Servlet
    Delete Node in a Linked List
    atitit.html5动画特效----打水漂 ducks_and_drakes
  • 原文地址:https://www.cnblogs.com/xiaoxu-xmy/p/8420945.html
Copyright © 2011-2022 走看看