前端html和css总结
1、html知识总结
1.1 表格的的相关属性
属性 | 表示 |
---|---|
border-collapse | 设置表格的边框是否被合并为一个单一的边框 |
cellpadding | 单元格边距 |
cellspacing | 单元格间距 |
valign: top | 顶对齐 单元格内容垂直方向的对齐方式 |
valign: middle | 居中对齐 |
valign: bottom | 底部对齐 |
colspan | 单元格可横跨的列数 |
rowspan | 单元格可竖跨的行数 |
1.2 表单常用属性
属性 | 表示 |
---|---|
name | 对提交到服务器后的表单数据进行标识 |
checked | 在页面加载时被预先选定的input元素 |
selected | 规定在页面加载时预先选定该选项 |
readonly | 只读元素 |
disabled | 禁用元素 |
size | 下拉列表中可见选项的数目 |
1.3 选择器的优先级
行内选择器 > id选择器 > 父代选择器 > class选择器 > 标签选择器 > *{}通配符选择器
1.4 有关间距的css属性
- margin/padding:
一个值:上下左右
两个值:上下,左右
三个值:上,左右,下
四个值:上,右,下,左
1.5 有关边框的css属性
- border-color:
一个值:上下左右
两个值:上下,左右
三个值:上,左右,下
四个值:上,右,下,左
1.6 取边框的圆角
- border-radius: 20px;
一个值情况下。四边都为20px;
border-radius: 50px 10px;
2个值得情况下:
border-radius: (左上角 右下角)(右上角 左下角)
3个值情况:
border-radius: 50px 10px 20px;
border-radius:(左上角) (右上角 左下角) (右下角)
四个值得情况:
border-radius: 80px 30px 15px 5px;
border-radius:(左上) (右上) (右下) (左下)
1.7 有关浮动
属性 | 表示 |
---|---|
float: left | 左浮动 正常从左到右 |
float: right | 右浮动 逆序 从右到左 |
float: none | 不浮动(默认) |
- 特点:
内容不覆盖,上一个元素做了浮动,下一个元素没有做浮动,下一个元素会自动顶上去。浮动不占位。 - 清除浮动
1、在哪个位置浮动,就在下方新建一个div
clear: both; 清楚浮动不会去影响整体布局结构。
2、父元素下的子元素浮动,会导致父元素塌陷 height=0 默认的div高度是根据内容来自动撑开
解决方案:
1:在父元素设置高度 弊端:不够灵活。
2:在浮动的后面,添加一个div,清除浮动。 弊端:代码不够美观,可能会出现嵌套。
3:在父元素上添加一个元素 overflow: hidden; 溢出隐藏
前端html和css总结的更多相关文章
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
- 前端零基础 --css转换--skew斜切变形 transfor 3d
前端零基础 --css转换--skew斜切变形 transfor 3d==============重要不紧急! 重要紧急 重要不紧急 不重要紧急 不重要不紧急
- 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解
前端html.CSS快速编写代码插件-Emmet使用方法技巧详解 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- 前端基础:CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- web前端篇:CSS使用,样式表特征,选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
随机推荐
- 用RocketMQ这么久,才知道消息可以这样玩
在上一章节中,我们讲解了RocketMQ的基本介绍,作为MQ最重要的就是消息的使用了,今天我们就来带大家如何玩转MQ的消息. 消息中间件,英文Message Queue,简称MQ.它没有标准定义,一般 ...
- [网鼎杯 2018]Comment-1|SQL注入|二次注入
1.打开之后只有一个留言页面,很自然的就想到了二次注入得问题,顺带查看了下源代码信息,并没有什么提示,显示界面如下: 2.那先扫描一下目录,同时随便留言一个测试以下,但是显示需要登录,账户.密码给出了 ...
- [CTSC2007]数据备份Backup (贪心)
题面 Description 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐 ...
- [CSP day1T3]树上的数
题面 题解 这道题由于是求字典序最小的,所以要贪心地枚举数字,然后找可以走到的编号最小的点,处理这条路径. 这条路径有一些特性. 以下是特别精炼的结论: 所以一旦选好了路径,这些边的先后顺序就被定死了 ...
- QQ高级功能
本篇文章为微信公众号:酿俗 教学内容请跟着小编一起探索吧! 第一步解锁微信豆影藏内容 随后下载需要的材料,注意!手机可能会提示有病毒!这里使用这些功能报病毒很正常 其实并没有病毒只是手机厂商的安全系统 ...
- 【manim】学习路径1-安装篇-windows、macOS
下一章:https://www.cnblogs.com/remyuu/p/16462369.html 本系列以大量实战讲解manim数学动画引擎. 文档编辑器推荐:Sublime Text 这里是一些 ...
- 【Java】学习路径46-两种创建多线程的方法、以及在匿名内部类创建线程
两种方法: 1.创建一个继承自Thread的线程类,然后再main(不限)中构造这个线程类对象.方法在之前讲过. 2.创建一个使用Runnable接口的线程类,然后在main(不限)中构造这个Runn ...
- 无线WIFI连接
家里的无线网络覆盖一直不全, 最近想改善一下.买了一个mercury的小路由器MW156RM 其实,我还是不理解WDS, repeater, bridge模式有什么区别. 目标就是实现最少的改动,保持 ...
- 2021年3月-第01阶段-Linux基础-Linux系统概念-Linux命令
Linux系统基本概念 图形界面: Ctrl+Shift +号 //调整命令终端变大 Ctrl - 号 //调整命令终端变小 命令终端: ~ 家目录:用户的私有场所,其他用户不能随便访问 root超级 ...
- [apue] 标准 I/O 库那些事儿
前言 标准 IO 库自 1975 年诞生以来,至今接近 50 年了,令人惊讶的是,这期间只对它做了非常小的修改.除了耳熟能详的 printf/scanf,回过头来对它做个全方位的审视,看看到底优秀在哪 ...