5.  CSS常用操作

5.1  对齐

　　使用margin属性进行水平对齐

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width:300px;

            height:100px;

           margin:0px auto;

            background-color: deeppink;

        }

    </style>

</head>

<body bgcolor="#8fbc8f">

    <div>

    </div>

</body>

</html>

　　使用position属性进行左右对齐

　　使用float属性进行左右对齐

5.2  分类

5.2.1尺寸操作

属性 设置元素高度
height 设置元素高度
line-height 设置行高（字的大小不变，行高过小字会重叠）
max-height 设置元素最大高度
max-width 设置元素最大宽度（一行字最长不能超过这个数值，如果最后一个单词写不完就会被放到第二行）
min-width 设置元素最小宽度
min-height 设置元素最小高度
width 设置元素宽度（内容元素会自动换行）

5.2.2  分类操作：

属性 描述
clear 设置一个元素的侧面是否允许其他的浮动元素
cursor 规定当指向某元素之上时显示的指针类型
display

设置是否及如何显示元素

display:inline;(在一行里面显示)
float 定义元素在哪个方向浮动
position 把元素放置到一个静态的、相对的、绝对的，固定的位置
visibility

设置元素是否可见或不可见

visibility:hidden;（设置元素不可见）

5.3  导航栏

5.3.1垂直导航栏

关键在于将li设置为水平块级元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>导航栏</title>

    <style>

        ul{

            list-style-type: none;

            margin:0px;

            padding:0px;

        }

        a{

            display:block;

        }

        a:link,a:visited{

            text-decoration: none;

            /*display:block;*//*在这里写这一句也可以，在上面写也可以，不过个人感觉最好还是在上面写*/

            /*将链接标签元素展示为块级元素，此类元素前后会带有换行符，自占一行*/

            /*<a>是内联元素 必须设置成块级元素block 才能有width和height

            不过你可以又定义display:block再定义成display:inline*/

            background-color: burlywood;

            color:aliceblue;

            width:80px;

            text-align: center;

        }

        a:hover,a:active{

            background-color: crimson;

        }

    </style>

</head>

<body>

    <div>

        <ul>

            <li><a href="#">列表1</a></li>

            <li><a href="#">列表2</a></li>

            <li><a href="#">列表3</a></li>

            <li><a href="#">列表4</a></li>

        </ul>

    </div>

</body>

</html>

5.3.2水平导航栏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>导航栏</title>

    <style>

        ul{

            list-style-type: none;

            margin:0px;

            padding:0px;

        }

        a{

            /*display:inline;*/

        }

        a:link,a:visited{

            text-decoration: none;

            /*display:block;*//*在这里写这一句也可以，在上面写也可以，不过个人感觉最好还是在上面写*/

            /*将链接标签元素展示为块级元素，此类元素前后会带有换行符，自占一行*/

            /*<a>是内联元素 必须设置成块级元素block 才能有width和height

            不过你可以又定义display:block再定义成display:inline*/

            background-color: burlywood;

            color:aliceblue;

            width:50px;

            height:50px;

            padding: 10px 10px;

            margin:10px;

            /*内联元素的margin不能修改他的上下margin元素的大小，只能修改左右margin，

            而padding的上下左右都可以*/

            /*通过设置内联元素的padding可以设置内联元素的大小*/

            text-align: center;

        }

        a:hover,a:active{

            background-color: crimson;

        }

        li{

            display:inline;

            /*内联元素是不能设置宽高的，只能通过修改padding

            （padding属于border内部的所以颜色可以跟着改变）和margin来改变

            内联元素的视觉大小，*/

            /*padding:10px 10px 10px;这一句无效*/

        }

    </style>

</head>

<body>

    <div>

        <ul>

            <li><a href="#">列表1</a></li>

            <li><a href="#">列表222222</a></li>

            <li><a href="#">列表3</a></li>

            <li><a href="#">列表4</a></li>

        </ul>

    </div>

</body>

</html>

关于替换元素的相关知识

先提供一个转载链接，关于替换元素和非替换元素知识的

https://segmentfault.com/q/1010000000694623

第二个转载链接同样是关于替换元素和非替换元素的

https://www.cnblogs.com/mmlvj/p/4580502.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>替换元素</title>

    <style>

        #divwai{

            height:20px;

            background-color: aliceblue;

        }

        #divnei{

            height:30px;

            background-color: deeppink;

        }

        #tuwai{

            /*height:30px;*/

        }

        #tu{

            height:40px;

            /*实践证明，在父元素行高大小已经固定的情况下，

            子元素比父元素大的情况并不会撑开父元素。*/

            /*padding:30px auto;*/

            /*图片标签属性padding不能设置为auto*/

            padding: 30px 30px;

            /*图片标签可以设置padding属性，padding元素占据的大小*/

            /*可以在父元素中占据大小*/

            margin:30px auto;

            /*图片标签可以设置margin属性，margin元素占据的大小*/

                    /*可以在父元素中占据大小*/

        }

    </style>

</head>

<body>

<div id="divwai">

    <div id="divnei">

    </div>

</div>

<div id="tuwai">

    <img src="bg.jpg" alt="图" id="tu">

</div>

<div style="padding:50px;" style="color: rgb(0, 0, 255);">></div>

<div><span style="padding:30px;" style="color: rgb(0, 0, 255);">>

    我是行内元素span

</span>

</div>

<!--span元素的padding居然不会撑开自己让自己的边界与其他元素隔开。。。

在与其他元素隔开的时候还是只算原来的字占的大小-->

</body>

</html>

5.3.3导航栏效果

如上面代码。

5.4  图片

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>imagetest</title>

    <style>

        body{

            margin:10px auto;

            width:70%;

            height:auto;

            background-color: burlywood;

        }

        .image{

            border:0px solid darkgray;

            /*此处的边界容易造成布局上的问题，

            如果仍要坚持使用的话最好是将这个img包含在一个比他还要大的div中*/

            width:25%;

            height:auto;

            float:left;

            /*display:inline;*/

            test-align:center;

            margin:5px 0px;

        }

        img{

            width:200px;

            height:200px;

            margin:5px;

            opacity: 0.5;

            /*opacity用来调整透盒子明度*/

        }

        .text{

            font-size:12px;

            margin-bottom:5px;

        }

        .container{

            width:100%;

            /*height:auto;*/

            /*width:auto;*/

            /*margin:auto auto;*/

        }

    </style>

    <!--在设计图片每行多少个的时候，需要学习其他音乐网站的写法，

    这里有很多种处理方式，像每行规定好多少个，每一个放在一个div中

    具体样式在div中进行处理，间隔用div内部的div的margin进行处理

    这是一种处理方式，另外一种就是提前规划好每个图片div的大小，调整其大小

    -->

</head>

<body>

    <div class="container">

        <div class="image">

            <a href="#" target="_self">

                <img src="bg.jpg" alt="风景"/>

            </a>

        </div>

        <div class="image">

            <a href="#" target="_self">

                <img src="bg.jpg" alt="风景"/>

            </a>

        </div>

        <div class="image">

            <a href="#" target="_self">

                <img src="bg.jpg" alt="风景"/>

            </a>

        </div>

        <div class="image">

            <a href="#" target="_self">

                <img src="bg.jpg" alt="风景"/>

            </a>

        </div>

        <div class="image">

            <a href="#" target="_self">

                <img src="bg.jpg" alt="风景"/>

            </a>

        </div>

        <div class="image">

            <a href="#" target="_self">

                <img src="bg.jpg" alt="风景"/>

            </a>

        </div>

        <div class="image">

            <a href="#" target="_self">

                <img src="bg.jpg" alt="风景"/>

            </a>

        </div>

        <div class="image">

            <a href="#" target="_self">

                <img src="bg.jpg" alt="风景"/>

            </a>

        </div>

        <div class="image">

            <a href="#" target="_self">

                <img src="bg.jpg" alt="风景"/>

            </a>

        </div>

        <div style="clear:both">

            <!--通过添加这一个clear:both;-->

            <!--这个属性设置可以让父元素里面有float元素把父元素撑起来-->

        </div>

    </div>

</body>

</html>

web前端学习（三）css学习笔记部分（3）-- css常用操作的更多相关文章

  1. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  2. 想做web前端project师应该学习些什么？

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  3. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  4. Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  5. 新手学习Web前端的三个高效学习方法，基础要重视

    作为新手,出于对风险的担心,不免在学习一项新技能或者转投一个新行业的时候,有所犹豫与徘徊.毕竟,在这场类似冒险的选择中,我们需要投入时间.精力以及承受相关的经济损失.但是,只有勇敢迈出第一步,才能为生 ...

  6. web前端开发控件学习笔记之jqgrid+ztree+echarts

    版权声明:本文为博主原创文章,转载请注明出处.   作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...

  7. 2022年Web前端开发流程和学习路线（详尽版）

    前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...

  8. web前端零基础入门学习！前端真不难！

    现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...

  9. 最适合2018年自学的web前端零基础系统学习视频＋资料

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

  10. 史上最全的web前端开发程序员学习清单！

    今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...

随机推荐

  1. 滚动字幕标记<marquee></marquee>

    <marquee>滚动内容</marquee> 常用属性: Direction : 滚动方向 取值 up, down left right width  :滚动宽度 heigh ...

  2. 2019牛客暑期多校赛（第三场）B-求01串中的最长01数量相等的子串和子序列

    https://ac.nowcoder.com/acm/contest/883/B 首先先把0所在的位置变-1,1所在位置变1,然后统计一个前缀和,用sum[i]表示. 那么如果从起点开始的话只要满足 ...

  3. 如何应用AxureRP做原型设计

    什么是原型呢?这个在之前介绍为什么需要进行原型设计当中有提到,原型是产品的最初形态,确认用户对产品界面和操作功能可用性的需求,高保真的原型接近于产品的最终形态,但仍只是原型.产品原型简单的说就是产品设 ...

  4. Maven入门指南

    Maven入门指南 本指南旨在第一次为使用Maven的人员提供参考,但也打算作为一本包含公共用例的独立参考和解决方案的工具书.对于新用户,建议您按顺序浏览该材料.对于更熟悉Maven的用户,本指南致力 ...

  5. Ln- Linux必学的60个命令

    1.作用 ln命令用来在文件之间创建链接,它的使用权限是所有用户. 2.格式 ln [options] 源文件 [链接名] 3.参数 -f:链结时先将源文件删除. -d:允许系统管理者硬链结自己的目录 ...

  6. HZOI20190822模拟29题解

    题面:https://www.cnblogs.com/Juve/articles/11396238.html 下面开始一句话题解: A:爬山: 二分答案,check即可 #include<ios ...

  7. ROS多线程编程

    int main(int argc, char **argv) { ros::init(argc, argv, "multi_sub"); multiThreadListener ...

  8. TFS2013 微软源代码管理工具 安装与使用图文教程

    最近公司新开发一个项目要用微软的TFS2013进行项目的源代码管理,以前只是用过SVN,从来没有用过TFS,所以在网上百度.谷歌了好一阵子来查看怎么安装和配置,还好花了一天时间总算是初步的搞定了,下面 ...

  9. JEECG-Boot开发环境准备（三）：开发环境搭建

    目录索引: 前端开发环境搭建 安装开发工具 导入项目 后端开发环境搭建 安装开发工具 导入项目 第一部分: 前端开发环境搭建 一.安装开发工具 安装nodejs.webstrom.yarn,安装方法参 ...

  10. Java中String类的常见面试题

    1. 判断定义为String类型的s1和s2是否相等 String s1 = "ab"; String s2 = "abc"; String s3 = s1 + ...