第一阶段——day06

最新推荐文章于 2019-11-20 10:46:25 发布

唐山吴彦祖

最新推荐文章于 2019-11-20 10:46:25 发布

阅读量166

点赞数

分类专栏：前端开发文章标签：第一阶段——day06

本文链接：https://blog.csdn.net/weixin_45825818/article/details/103157924

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

day06

1：浮动属性对元素显示模式的影响

显示模式 display: block /inline /(inline-block)

块级元素 + float—行内块
行内 +float ---- 去掉间隙设置宽高起作用 —行内块
行内块 +float — 行内块 float属性也会将盒子变成私有领域 (BFC)

所以不会互相影响 —》vertical-align没用

2：浮动解决的问题是图文环绕

在这里插入图片描述


    <style>
    img {
        float: right;
    }
    /* 文本遇见浮动盒子会进行环绕放置 */
    p {
        /* 私有领域  overflow:hidden */
        /* overflow: hidden; */
    }
    </style>
</head>
<body>
    <img src="../代码/image/zjl.jpg" alt="">
    
    <p>周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，毕业于淡江中学，中国台湾流行乐男歌手、音乐人、演员、导演、编剧等。
            2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [5]  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖 [8]  。
            2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖 [9]  。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [10]  ；同年凭借专辑《魔杰座》获得第20届金曲奖最佳国语男歌手奖 [11]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [12]  。2011年凭借专辑《跨时代》再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖 [13]  ；同年主演好莱坞电影《青蜂侠》 [14]  。2012年登福布斯中国名人榜榜首 [15]  。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》 [16]  。2018年举行“地表最强2世界巡回演唱会” [17]  。
            演艺事业外，他还涉足商业、设计等领域。2007年成立杰威尔有限公司 [18]  。2011年担任华硕笔电设计师并入股香港文化传信集团 [19-20]  。
            周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。2008年捐款援建希望小学 [21]  。2014年担任中国禁毒宣传形象大使 [22]  。周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，毕业于淡江中学，中国台湾流行乐男歌手、音乐人、演员、导演、编剧等。
            2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [5]  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖 [8]  。
            2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖 [9]  。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [10]  ；同年凭借专辑《魔杰座》获得第20届金曲奖最佳国语男歌手奖 [11]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [12]  。2011年凭借专辑《跨时代》再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖 [13]  ；同年主演好莱坞电影《青蜂侠》 [14]  。2012年登福布斯中国名人榜榜首 [15]  。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》 [16]  。2018年举行“地表最强2世界巡回演唱会” [17]  。
            演艺事业外，他还涉足商业、设计等领域。2007年成立杰威尔有限公司 [18]  。2011年担任华硕笔电设计师并入股香港文化传信集团 [19-20]  。
            周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。2008年捐款援建希望小学 [21]  。2014年担任中国禁毒宣传形象大使 [22]  。周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，毕业于淡江中学，中国台湾流行乐男歌手、音乐人、演员、导演、编剧等。
            2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [5]  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖 [8]  。
            2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖 [9]  。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [10]  ；同年凭借专辑《魔杰座》获得第20届金曲奖最佳国语男歌手奖 [11]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [12]  。2011年凭借专辑《跨时代》再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖 [13]  ；同年主演好莱坞电影《青蜂侠》 [14]  。2012年登福布斯中国名人榜榜首 [15]  。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》 [16]  。2018年举行“地表最强2世界巡回演唱会” [17]  。
            演艺事业外，他还涉足商业、设计等领域。2007年成立杰威尔有限公司 [18]  。2011年担任华硕笔电设计师并入股香港文化传信集团 [19-20]  。
            周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。2008年捐款援建希望小学 [21]  。2014年担任中国禁毒宣传形象大使 [22]  。</p>

        </p>
        </body>
</html>

定位属性布局第3大块

fun: 你想放在哪就放在哪 anywhere

属性名: position

属性类型: static / relative/absolute/ fixed

属性方向值: left top right bottom

left: 距离父级左边界的距离

top:距离父级上边界的距离

right:距离父级右边界的距离

bottom:距离父级底边界的距离

(left,top) (right,bottom)

原理:

2d平面

在这里插入图片描述

定位类型	是否脱标	位置变化	定位参考位置点	用处
static	否	没有	无	无
relative	否	有(left,top)	自身原来的初始位置	1：微调位置（外边距）2：子绝父相
absolute	是	有	以离的最近拥有定位属性（除了静态）的父级元素左上角参考	anywhere (覆盖)
fixed	是	有	body左上角	滚动条动盒子不动时

定位实现盒子居中

在这里插入图片描述

阴影盒子：

绝对定位盒子的高度 height:100% ；看定位的参考元素

盒子水平垂直居中：

div {
        width:xpx;
        height:ypx;
        position: fixed/absolute;
//   向下走父盒子高度的一半    
        top:50%;
    //向上走自身的高度一半
        margin-top: -y/2px;
    //向右走父盒子的宽度的一半
        left:50%;
    //向左走自身宽度的一半
        margin-left: -x/2px;
    
}

列表属性

list-style: list- style-type 前缀样式 list-style-position list-style-image

list- style-type 前缀样式

disc： 实心圆(CSS1) 
circle： 空心圆(CSS1) 
square： 实心方块(CSS1) 
decimal： 阿拉伯数字(CSS1) 
lower-roman： 小写罗马数字(CSS1) 
upper-roman： 大写罗马数字(CSS1) 
lower-alpha： 小写英文字母(CSS1) 
upper-alpha： 大写英文字母(CSS1) 
none： 不使用项目符号(CSS1) 
armenian： 传统的亚美尼亚数字(CSS2) 
cjk-ideographic： 浅白的表意数字(CSS2) 
georgian： 传统的乔治数字(CSS2) 
lower-greek： 基本的希腊小写字母(CSS2) 
hebrew： 传统的希伯莱数字(CSS2) 
hiragana： 日文平假名字符(CSS2) 
hiragana-iroha： 日文平假名序号(CSS2) 
katakana： 日文片假名字符(CSS2) 
katakana-iroha： 日文片假名序号(CSS2) 
lower-latin： 小写拉丁字母(CSS2) 
upper-latin： 大写拉丁字母(CSS2)

list-style-position : 列表前缀位置

outside: 前缀在有效内容外侧默认值

inside 前缀在有效内容内侧

list-style-image: 前缀是图片的类型

在这里插入图片描述

list-style-image:url(图片路径)

显示和隐藏

属性名: display:显示模式

显示： display:block

隐藏: display:none; 不可见

圆角边框属性css3

属性名:

border-radius:边的弧度

在这里插入图片描述

border-radius:20px;  四个角的弧度都是20px (水平和垂直切线的距离都是20px)
border-radius:50% ; 圆  ，椭圆


2: border-radius:20px 40px;  20px 左上角以及右下角   40px 右上角以及左下角

3：border-radius:20px 40px 50px ; 20px 坐上  40px 右上 以及左下  50px 右下
4：border-radius:10px 20px 30px 40px 顺时针

设置切线在水平和垂直方向切的不一样

border-radius:10px/20px ; 四个角的水平切值都是10px 垂直切值都是20px
border-radius:10px 30px /20px 40px;  (10px ,20px) (30px,40px)   水平切值/垂直切值
border-radius:10px 20px 30px 40px/ 40px 30px 20px 10px;

和垂直方向切的不一样

border-radius:10px/20px ; 四个角的水平切值都是10px 垂直切值都是20px
border-radius:10px 30px /20px 40px;  (10px ,20px) (30px,40px)   水平切值/垂直切值
border-radius:10px 20px 30px 40px/ 40px 30px 20px 10px;

在这里插入图片描述

唐山吴彦祖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一阶段——day06

day061：浮动属性对元素显示模式的影响显示模式 display: block /inline /(inline-block)块级元素 + float—行内块行内 +float ---- 去掉间隙设置宽高起作用 —行内块行内块 +float — 行内块 float属性也会将盒子变成私有领域 (BFC) 所以不会互相影响 —》vertical-ali...
复制链接

扫一扫