美文网首页
Chapter9 盒模型

Chapter9 盒模型

作者: Holase | 来源:发表于2016-11-03 15:27 被阅读0次

    CSS将每个元素看做一个盒子表示,由内容,内边框,外边框组成。
    内容可被透明内边框padding包围,内边框周围可放一个可选边框border,有一个可选的透明化外边框(margin)包围所有部分。
    所有元素,甚至inline元素,也被当做盒。
    外边距提供元素之间的间距。

    .guarantee{ border-color: black; border-width: 1px; border-style: solid; background-color: #a7caca; padding: 25px; margin:30px; color: gray; line-height: 1.9em; font-style: italic; font-family: Georgia,"Times New Roman",Times,serif; background-image: url(images/background.gif); 添加背景图 background-repeat: no-repeat; 不重复出现背景图 background-position: top left; 背景图位置


    background-repeat: repeat; (default) no-repeat; (不重复) repeat-x; (水平重复) repeat-y; (垂直重复) inherit (继承父级元素)


    background-position: top; left; right; bottom; center;


    border-style:solid;dotted;double;dashed;groove;inset;outset;ridge;


    border-top/right/left/bottom-color/style/width设置某一条边框的属性


    border-radius:15px设置圆角
    border-top/bottom-left/right-radius:3em某个角设置圆角


    id是一个元素的唯一标识符,class是一群元素的标识符
    但是一个元素可以既有id,又有class.

    class元素的选择器是.class
    id元素的选择器是#id


    多个样式表时,后出现的样式表优先。使用多个样式表的原因:1.网站不同模块的需要;2.面向不同浏览器。
    在指定样式表的链接中,添加media属性,可以在指定设备类型是触发。
    或者直接在CSS 文件中使用@media规则,使用媒体查询。
    (需要密切关注指定设备的最佳时间)

    相关文章

      网友评论

          本文标题:Chapter9 盒模型

          本文链接:https://www.haomeiwen.com/subject/kcabuttx.html