网赚妈妈

 找回密码
 立即注册
搜索
查看: 1073|回复: 6

[新手网赚] CSS 深入

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-10-19 20:06:54 | 显示全部楼层 |阅读模式

    1.居中五环

    根据前面所学内容写一个始终居中的奥运五环

    aBF4444CUHLOCC8c.jpg

    五环源代码

    H145fS5Q0UfFi15i.jpg

    五环运行结果

    2.两栏布局

    A1E0uJbsp1nay3lq.jpg

    两栏布局代码(其中right必须写到left前面)

    3.两个经典BUG

    1.(margin塌陷)父子嵌套的元素垂直方向的margin会取父子中较大的值移动

    解决方法:触发BFC

    2.(margin合并) 两个div竖直方向的margin会合并

    lSchBEyg7yRXFF5D.jpg

    margin合并问题

    解决方法:可以触发BFC解决,但是一般不解决,因为会改html,html在开发中比较基层,所以不解决。

    4.BFC

    四个触发条件(将属性加入到父元素中即可):

    1.position:absolute

    2.display:inline-bock

    3.float:left/right

    4.overflow:hidden(一般用于处理溢出部分隐藏,解决塌陷时将该熟悉加到父元素中)

    5.浮动模型

    float:参数为left、right (将每行元素改为float布局)

    clear:both(清除周围浮动流)

    1.加入float的元素为浮动元素

    2.浮动元素产生了浮动流,所有产生了浮动流的元素,块级元素看不到他们,产生了bfc的元素和文本类属性的元素(带inline的)以及文本都能看到浮动元素。

    3.问题:一个块级父元素不能看到浮动元素,怎么获得父元素边框?

    方法1:取一个不显示的标签,清除其周围浮动流,将边框撑开

    clear:both(只对块级元素生效)

    kmOoMKwpIVmiEilw.jpg

    解决办法

    伪元素:可以用css来操作,但是没有写到html里面(::before::after)

    方法2:.父元素::after{content:"";clear:both;display:block;}

    方法3:将父级元素设为可见浮动流的元素(例如设为bfc)

    知识点:设置position:absolute以及float:left/right打内部把元素变为inline-block

    应用:实现文字图片顶对齐

    dRJ7l67BH76Z5qMz.jpg

    使用float:left之前

    zs1Ph651H6567tEc.jpg

    使用该属性后

    6.写一个简单实例

    目标实现

    qPqlNGF11PpuQLQ9.jpg

    7.溢出容器,要打点展示

    1.单行文本溢出处理:

    解决方法:white-space:nowrap(成为一行);overflow:hidden(溢出部分隐藏);text-overflow:ellipsis(隐藏部分用点代替);

    2.多行文本溢出处理:

    解决方法:直接写...(百度就是这么实现的)

    8.背景图片处理

    属性:background-image:url();background-size: px px;background-repeat:no-repeat;background-position: px px(left top left bottom left center);

    9.图片代替文字问题

    i16656OqEKkoLEpF.jpg

    当不加载css时希望出现文本”淘宝网“的超链接

    解决办法1:

    text-indent: px(容器缩进容器宽度);white-space:nowrap(强制不换行);overflow:hidden(容器外隐藏);

    解决办法2:

    将容器高度设为0;将内边框上部设为图片高度;因为背景会在padding中扩展,而文字不会,所以文字会被挤出容器,将容器外设为隐藏即可。

    10.标签嵌套标准

    行级元素只能嵌套行级元素,

    块级元素可以嵌套任何元素,

    p标签不能嵌套块级元素,

    a标签不能嵌套a标签

    11.css要点补充说明:

    1.

    h6jStmfFJBibS79J.jpg

    实现随着界面改变大小内层容器不变并始终居中(只对块元素适用)

    2.带inline的元素有文本的特点,例如将空白或者换行展示为一个文本分隔符(例如img)

    gDCVgyv1ie8qUUCU.jpg

    代码1

    wA9TP8A8aATnDzdT.jpg

    代码1展示结果

    NnabfsBE1es19s14.jpg

    代码2

    BAx1162km2y612Ec.jpg

    代码2展示结果

    3.position:absulute以及float:left/right会将元素从内部改为display:inline-block

    4.一旦一个行级块元素中有文字时,后面的文字会和该文字底对齐;不过可以通过vertical-align:来调整对其像素。

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-19 20:07:34 | 显示全部楼层
    就喜欢你这种用截图发代码的。那些直接在文章里插代码的简直就是反人类
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-19 20:19:31 | 显示全部楼层
    我擦,姬哥的css精英课堂
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-19 20:31:52 | 显示全部楼层
    渡一教育
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-19 20:43:58 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-19 20:55:51 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-19 21:07:28 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-24 07:39 , Processed in 0.176546 second(s), 15 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表