CSS学习第三天
定位布局:
相对定位:相对于自身的位置进行偏移position需要搭配left right top bottom position: relative;
绝对定位:相对于有position属性的父元素定位,如果父元素没有position属性就会再向上找父元素,最后一直找到body元素 position: absolute;
固定定位:position: fixed;
隐藏溢出内容:
hidden内容溢出div就隐藏 overflow: hidden;
scroIl内容溢出添加滚动条 overflow: hidden;
块状元素转内联元素:
block:块状; inline:内联元素; inline -block:内联块状的结合 display: block;内联元素转块状
inline-block:可以设置宽高,不独占一行 none :隐藏
css3:
translate(x轴,y轴): 移动 transform: trans late(20px, 50px);
rotate (顺时针旋转度数):旋转 transform: rotate(200deg) ;
CSS学习第三天的更多相关文章
- CSS学习笔记三:自定义单选框,复选框,开关
一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- css学习笔记三
总结一下水平居中和垂直居中的方法,欢迎交流指正,共同进步! 1.水平居中 1.1):行内元素水平居中,在其父类设置text-align:center; 1.2): 块级元素水平居中有三种 第一种:定宽 ...
- css学习の第三弹—盒模型的创建和使用
一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h ...
- CSS学习(三)
CSS 分组 和 嵌套 选择器 分组选择器 h1,h2,p { color:green; } 嵌套选择器 <!DOCTYPE html> <html> <head> ...
- CSS学习(三)特指度和层叠
一.特指度 特制度的一般形式是0,0,0,0 行内样式,第一位的特指度加一 id选择符,第二位的特指度加一 类选择符.属性选择符.伪类,第三位的特指度加一 元素选择符.伪元素,第四位的特指度加一 特指 ...
- CSS学习笔记之基本介绍
1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
- css学习归纳总结(三) 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- html css的简单学习(三)
html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...
随机推荐
- 浅谈工业4.0背景下的空中数据端口,无人机3D 可视化系统的应用
前言 近年来,无人机的发展越发迅速,既可民用于航拍,又可军用于侦察,涉及行业广泛,把无人机想象成一个“会飞的传感器”,无人机就成了工业4.0的一个空中数据端口,大至地球物理.气象.农业数据.小至个人位 ...
- ASP.NET CORE之中间件-自定义异常中间件
参考资料:https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/middleware/?view=aspnetcore-3.1 1.一般A ...
- 题解 CF1372C
题目 传送门 题意 给你一个 \(1\) 到 \(n\) 的排列. 定义特殊交换为:选择一段区间\([l,r]\) ,使得此段区间上的数交换后都不在原来的位置. 问最少多少次可以将此排列变成升序的. ...
- 题解 UVA1193 Radar Installation
原题 PDF OJ 思路 分析 因为半径d已经确定,所以对于每个点,我们可以算出它在x 轴上的覆盖位置线段LR,如图. 此问题便转为: 对于 n 个区间,每个区间内至少有1个点,求最少点数. 算法 我 ...
- 《Head First 设计模式》:工厂方法模式
正文 一.定义 工厂方法模式定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个.工厂方法让类把实例化推迟到子类. PS:在设计模式中,"实现一个接口"泛指实现某个超类型(可 ...
- Linux文件搜索
一.whereis及which命令 这两个命令用来搜索命令的路径(也遵循/etc/updatedb.conf配置文件的筛选规则) whereis 命令名 ...
- 抽象工厂模式(c++实现)
抽象工厂模式 目录 抽象工厂模式 模式定义 模式动机 UML类图 源码实现 优点 缺点 感悟 模式定义 抽象工厂模式(Abstract Factory),提供一个创建一系列相关或相互依赖对象的接口,而 ...
- 2020最新全栈必备 Redis,你还不了解么
什么是Redis Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如字符串, 散列, 列表, 集合, 有序集合与范围查 ...
- vue学习(三) v-bind指令
//html <div id="app"> <input type="button" value="ok" v-bind: ...
- Redis(二)Jedis操作Redis
如果测试连接的时候,报下面这个异常,可以参考下面的博客进行处理: Exception in thread "main" redis.clients.jedis.exceptions ...