html和css学习总结

html-css025

html和css学习总结,第1张

本周我大概用了六天的时间完成了html和css的复习、制作考核网页以及完成了学长布置的五个学习小任务,总的来说,虽然完成了这一周的学习,但是对于一些知识点掌握的不是很牢固,使用不太熟练,之后还需要多加练习,对于本周的学习我有如下总结:

对于写网页需要的基础知识一定要牢牢掌握,比如,每个网页都需要的导航栏,一定要熟练掌握;下拉菜单最常用的是 ul 和 li 标签,也就是列表元素;对于一些标签,一定要知道是块级元素还是行内元素,要掌握他们之间的转换方法,这个也是非常常用的。对于css的盒子模型,一定要认真地学习,并且能熟练的运用。

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、 对齐和分配空白空间。

 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

 弹性容器内包含了一个或多个弹性子元素。

 注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

 当为父盒子设为flex布局,子元素的float、clear和vertical—align属性将失效

    flex布局原理:通过给父盒子添加flex属性,来控制子盒子的位置好排列方式

  flex布局父项常见的属性:

                1.flex-diretion:设置主轴的方向

                 默认的主轴方向是x轴方向,水平方向;默认的侧轴方向是y轴方向,水平向下

                    属性值:row 默认值从左到右

                           row-reverse 从右到左

                           column 从上到下

                           column 从下到上

                2.jusity-content:设置主轴上的子元素排列方式

                    属性值: flex-start 默认值从头开始 如果主轴是x轴,则从左到右

                             flex-end  从尾部开始排列

                             center 在主轴居中对齐(如果主轴是x轴则水平居中)

                             space-around平分剩余空间

                             space-between 先两边贴边再平分剩余空间(重要)

                3.flex-wrap:设置子元素是否换行

        属性值: nowrap 默认子元素不换行 如果装不下,会缩小子元素的宽度,一块放到父元素中

                        wrap 换行

                4.align-content:设置侧轴的子元素排列方式(多行 需要换行) 单行无效

                    属性值: flex-start 默认值在侧轴的头部开始排列

                             flex-end  在侧轴的尾部开始排列

                             center 在侧轴中间显示

                             space-around 子轴在侧轴平分剩余空间

                             space-between 轴在侧轴先分布在两头,再平分剩余空间

                             stretch   设置子项元素高度平分父元素高度

                5.align-items:设置侧轴的子元素排列方式(单行)

                    属性值: flex-start 从上到下

                             flex-end  从下到上

                             center    挤在一起(垂直居中)

                             stretch   拉伸(默认值) 使用时子盒子不要给高度

                    例如:子元素居中  默认主轴是x轴

                       主轴居中 jusity-content:center

                       侧轴居中 align-items:center

                6.flex-flow:复合属性,相当于同时设置了flex-diretion和flex-wrap

            flex布局子项常见属性

                1.flex定义子项目分配剩余空间,用flex来表示占多少份数

                    flex:<number>默认值 0

                2.align-self控制子项自己在侧轴的排列方式

                3.order属性定义子项的排列顺序(前后顺序)

 给父元素添加 display:grid

      display关于网格的取值分为两个,grid(块网格)和 inline-grid (行内网格 行内块)

      grid 容器从上向下排列

      inline-grid 容器从左向右排列

   grid-template-row规定行属性

    grid-template-column规定列属性

    1.绝对大小(根据列数或者行数确定值得个数)

       grid-template-row:200px 200px 200px

       grid-template-column:200px 200px 200px

    2.百分比(根据列数或者行数确定值得个数)

       grid-template-row:33.33% 33.33% 33.33%

       grid-template-column:33.33% 33.33% 33.33%

    3.repeat函数

       grid-template-rows: repeat(3,33.3%)

       grid-template-columns: repeat(3,33.3%)

    4.repead auto-fill  自动填充

        grid-template-rows: repeat(auto-fill,33.3%)

        grid-template-columns: repeat(auto-fill,33.3%)

    5.fr 片段  

        grid-template-rows: 100px 1fr 300px

        grid-template-columns: 100px 1fr 300px

    6.minmax

       grid-template-rows:minmax(100px,200px) 200px 300px

       grid-template-columns:200px 200px 200px

    7.auto

        grid-template-rows: 100px auto 300px

        grid-template-columns: 100px auto 300px

    列间距

    1.grid-row-gap: 10px

      grid-column-gap: 10px

      复合写法

      grid-gap: 10px 10px

    指定区域

     1.grid-template-areas: 'a b c '

                                         'd e f'

                                        'g h i'

        区域合并时  需要让合并的区域名字相同

        grid-template-areas: 'a a c '

                                         'd e f'

                                         'g h i'

        .box div:nth-child(1){

            grid-area: a

        }

以上两种网页布局方式是我制作网页时比较常用的,也是学习前端必须掌握的。

除了以上这些,还有很多是我们需要掌握的,加油吧继续学习!!!!!!下周分享js学习总结

大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求。css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁。

这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到。两篇对比学习,更容易理解。

#表示 id选择器

.表示 class选择器

>表示子元素,层级

一个空格也表示子元素,但是是所有的后代子元素,相当于 xpath 中的相对路径

1.css可以通过元素的id、class、标签这三个常规属性直接定位到

2.如下是百度输入框的的html代码:

3.css用#号表示id属性,如:#kw

4.css用.表示class属性,如:.s_ipt

5.css直接用标签名称,无任何标示符,如:input

1.css除了可以通过标签、class、id这三个常规属性定位外,也可以通过其它属性定位

2.以下是定位其它属性的格式

[name=wd] [autocomplete='off'][maxlength='255']

css页可以通过标签与属性的组合来定位元素

input.s_ipt input#kw input[id='kw']

//form的id属性

form#form>span>input

//form的class属性

form.fm>span>input

css也可以通过索引nth-child(1)来定位子元素,直接翻译过来就是第几个小孩

总结:选择标签后,找第几个小孩即可

Select控件第三个Opel

#select>select>option:nth-child(3)

CheckBox第一个Volvo

#checkbox>input:nth-child(1)

CheckBox第二个Saab

#checkbox>input:nth-child(4)

RadioBox第二个Saab

#radio>input:nth-child(4)

通过索引nth-of-type(2)来定位子元素,按照分类指定

选择select的saab

#select>select>option:nth-of-type(2)

选择 id 为 radio 的 p 下的第 1 个子节点

p#radio>input:nth-of-type(4)+label

选择id 为radio 的p 下的第4 个input 节点之后挨着的 label

节点

p#radio>input:nth-of-type(4)~label

css同样也可以实现逻辑运算,同时匹配两个属性,这里跟xpath不一样,无需写and关键字

[type='checkbox'][name='checkbox1']

css语法远远不止上面提到的,还有更多更强大定位策略,有兴趣的同学可以继续深入研究!

如觉得文章对您有帮助,还请帮忙转发!